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>
      );
   }
}

Reacts createRef函数为表单字段创建引用，在表单提交时，我们可以使用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')
);