版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/cjg214/article/details/83240547
组件类型 | 表单数据处理方式 |
---|---|
受控组件 | React组件处理 |
非受控 | DOM处理(使用ref) |
受控组件:
class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
非受控组件(快速随性,减小代码量):
class NameForm extends React.Component {
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(event) {
alert('A name was submitted: ' + this.input.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" ref={(input) => this.input = input} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
2.受控vs 非受控
使用场景 | 非受控 | 受控 |
---|---|---|
一次性值的检查(如表单提交) | y | y |
表单提交时校验 | y | y |
即时现场验证 | x | y |
有条件的禁用提交按钮 | x | y |
强制文本框格式化 | x | y |
一个数据的几个输入 | x | y |
动态input | x | y |
备注:如果表单在ui反馈方面很简单,使用不受控完全ok。
3.受控
每一个表单元素,独有一个不同的prop设置它的值。下面是表格汇总(含文本框、复选框、单选框、文本域、选择)
https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/
4.非受控组件,设定默认值时用defaultValue。
<input
defaultValue="Bob"
type="text"
ref={(input) => this.input = input} />
同样, 和 支持 defaultChecked, 和 支持 defaultValue.
5.文件输入
<input type="file" />
是一个不受控组件,因为它的值不是以编程方式设置。
备注:创建ref节点以访问提交处理程序中的文件:
class FileInput extends React.Component {
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(event) {
event.preventDefault();
alert(
`Selected file - ${this.fileInput.files[0].name}`
);
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Upload file:
<input
type="file"
ref={input => {
this.fileInput = input;
}}
/>
</label>
<br />
<button type="submit">Submit</button>
</form>
);
}
}
ReactDOM.render(
<FileInput />,
document.getElementById('root')
);