ControlledComponents输入表单元素，其值被React控制的称为“受控组件”。类NameForm扩展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('Anamewassubmitted:'+this.state.value);事件。防止默认（）；}render(){return();}}通过绑定onChange，实现类似双向绑定的理解：首先，输入的显示值受value={this.state.value}控制，通过输入时的onChange函数回调，设置新接受的value回到this.state.value，然后作用于组件的显示，形成双向绑定的感觉。在大多数情况下，非受控组件接下来，我们推荐使用受控组件来实现表单。在受控组件中，表单数据由React组件处理。当让DOM处理表单数据时，替代方法是使用不受控制的组件。默认值defaultValue在React生命周期中，表单元素上的value属性会覆盖DOM中的值。当使用不受控制的组件时，你通常希望React能够给它一个初始值，但不再控制后续的更新。要解决此问题，您可以指定defaultValue属性而不是值。render(){return();}文件输入标签在React中，总是是一个不受控制的组件，因为它的值只能由用户设置，而不能以编程方式设置。类FileInput扩展React.Component{constructor(props){super(props);this.handleSubmit=this.handleSubmit.bind(this);}handleSubmit（事件）{event.preventDefault（）;alert(`选择的文件-${this.fileInput.files[0].name}`);}render(){return(
提交);}}ReactDOM.render(,document.getElementById('root'));受控和非受控你应该怎么选择原文结论受控和不受控的表单字段都有其优点。评估您的具体情况并选择方法——适合您的方法就足够了。如果您的表单在UI反馈方面非常简单，请取消控制olledwithrefs完全没问题。您不必听各种文章所说的“不好”。此外，这不是一劳永逸的决定：您始终可以迁移到受控输入。从不受控制的输入到受控的输入并不难。两种方法都有各自的优点。根据具体的使用场景进行评估，选择更合适的方式。如果表单在UI反馈方面非常简单，那么ref的使用不受控制。组件完全没问题，不用听各种文章说什么是“坏”，同样也不是说不能改，毕竟总是可以转controlled的，用controlled不是很难。
