| By propssetting its valuecomponent value is a kind of controlledassembly. A typical form form, like
- Input box
<input>
- Drop-down box
<select>
- Checkbox
<input type="checkbox">
- Single box
<input type="radio">
- Text Box
<textarea>
These can prevent this by propssetting the initial value, and by listening to his possession of onChangesevents to set the new value back to React in. In this way, the value of the component will always React in the state are synchronized.
class NameForm extends React.Component {
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
this.input = React.createRef();
}
handleSubmit(event) {
alert('A name was submitted: ' + this.input.current.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" ref={this.input} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
As above, the controlledtypes of components required in a corresponding assembly stateto hold respective values. At the same time you need to write after listening logic updates the value of the component. Corresponding uncontrolledtype, will be much more convenient, it is actually common HTML tags. For the uncontrolledtypes of components to get it through the body of the ref valuevalue.
class Form extends Component {
handleSubmitClick = () => {
const name = this._name.value;
// do something with `name`
}
render() {
return (
<div>
<input type="text" ref={input => this._name = input} />
<button onClick={this.handleSubmitClick}>Sign up</button>
</div>
);
}
}
As can be seen, uncontorlledthe type of component, which value is in the DOM node, when needed, such as the storage form is submitted, then the value taken by the respective ref acquired DOM node. In contrast, the controlledtype of component is the latest in the field of value push (push) to React, whereas uncontrolledtypes of components are needed to pull (pull) the value of its body. Compared with trade-offs Although refthe official documents is not recommended, nor say uncontrolledtypes of components can not be used; although the controlledtypes of components such data take the state to update and maintain the way, a little more React, it does not mean that it is necessary in the preparation of the form use all controlledtypes of components. Both are free to choose in different situations, totally needs. controlled Although the types of components would be more trouble to write, its value is always synchronized with the React state, so there are some advantages,
- To easily check the value entered by the user, and then display an appropriate error message.
- Field used input format can be, for a value of a specific type, such as credit cards, mobile phones and so on.
- The submit button is enabled or disabled according to the user's real-time fill in the form.
所以如果需要上述这些东西，可以考虑 controlled 类型来编写组件，而 uncontrolled 类型代码上写起来很简洁点，少了 state 及事件绑定，可用在功能简单，或者 React 快速上手，快速实现功能的场景。 相关资源
|