版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zeping891103/article/details/83832802
受控组件
在<input>这类表单元素中,当用户修改输入数据,表单会自动将其赋值到value属性中,这称为HTML元素维持了自身状态。但在react开发中,我们应尽可能的将这种可变的状态保存在组件的状态属性中,并且只能用 setState() 方法进行更新。也就是说,React不但负责渲染表单的组件而且自主控制着表单元素的输出值,这类组件称为受控组件。在开发组件时,应尽可能定义为受控组件,如:
import React from 'react';
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(
<div>
<input type="text" value={this.state.value} onChange={this.handleChange} />
<input type="button" onClick={this.handleSubmit} value="click" />
</div>
);
}
}
//导出组件
export default NameForm;
该例子中 value={this.state.value} onChange={this.handleChange} 是整段代码的核心语句,其<input />的value属性只能通过自身状态this.state来控制。
非受控组件
在受控组件中,表单数据由 React 组件处理。如果让表单数据由dom处理时,这时候该组件称为非受控组件。比如说在HTML中,<input type="file">
可以让用户从其设备存储中选择一个或多个文件上传到服务器,或通过File API进行操作,它始终是一个不受控制的组件,因为它的值只能由用户设置,而不是以编程方式设置。针对非受控组件,我们通常通过ref从dom中获取表单值或操作dom节点。
import React from 'react';
class FileInput extends React.Component {
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
this.fileInput = React.createRef();
}
handleSubmit(event) {
event.preventDefault();
console.log(this.fileInput.current.files[0].name);
}
render() {
return(
<div>
<label>Upload file:</label>
<input type="file" ref={this.fileInput} />
<br />
<button onClick={this.handleSubmit}>Submit</button>
</div>
);
}
}
//导出组件
export default FileInput;