React.js中不受控制的组件
在受控组件形式中，数据由React组件通过编写事件处理程序进行状态更新来处理。但是在不受控制的组件中，表单数据由DOM本身处理。
ref用于从DOM接收表单值。
示例
class UserNameForm extends React.Component {
constructor(props) {
super(props);
this.handleFormSubmit = this.handleFormSubmit.bind(this);
this.inputUserName = React.createRef();
}
handleFormSubmit(event) {
console.log('username: ' + this.inputUserName.current.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleFormSubmit}>
<label>
Name:
<input type="text" ref={this.inputUserName} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}ReactscreateRef函数为表单字段创建引用，在表单提交时，我们可以使用this.inputUserName.current.value来访问字段值。注意在引用名称之后使用current。
这是一种快速而又肮脏的解决方案，它实际上具有较少的代码，但具有较少的控制。
对于不受控制的组件，React提供了一个称为defaultValue的属性，以将初始值提供给form字段。
render() {
return (
<form onSubmit={this.handleFormSubmit}>
<label>
User Name:
<input
defaultValue="Steve"
type="text"
ref={this.inputUserName} />
</label>
<input type="submit" value="Submit" />
</form>
);
}输入类型文件始终是不受控制的组件，因为其值只能由用户设置，而不能通过编程设置。
示例
文件输入示例-
class FileInputExample extends React.Component {
constructor(props) {
super(props);
this.handleFormSubmit = this.handleFormSubmit.bind(this);
this.selectedFileInput = React.createRef();
}
handleFormSubmit(event) {
event.preventDefault();
console.log(
`Selected file - ${
this.selectedFileInput.current.files[0].name
}`
);
}
render() {
return (
<form onSubmit={this.handleFormSubmit}>
<label>
Upload file:
<input type="file" ref={this.selectedFileInput } />
</label>
<br />
<button type="submit">Submit</button>
</form>
);
}
}
ReactDOM.render(
<FileInputExample />,
document.getElementById('root')
);