反应.js | 非受控与受控输入

反应.js是一个用于构建用户界面的JavaScript库，它提供了强大的组件化工具和灵活的数据绑定机制，允许开发人员快速创建交互式用户界面。在反应.js中，输入元素是常见的界面组件之一，它允许用户与应用程序进行交互并输入数据。反应.js提供了两种输入元素的实现方法 - 非受控输入和受控输入。

非受控输入

非受控输入允许用户在输入元素上自由地输入任何文本，反应.js不会捕获或操纵该文本。开发人员可以使用非受控输入来实现简单的表单，并获得一些性能优势，因为反应.js不需要在每个输入值onChange事件上重新渲染组件。

以下是使用非受控输入元素的示例：

class UncontrolledInput extends React.Component {
  handleSubmit = (event) => {
    console.log('Input Value: ', this.input.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Input:
          <input type="text" ref={(input) => this.input = input} />
        </label>
        <button type="submit">Submit</button>
      </form>
    );
  }
}

在此示例中，我们使用ref属性将输入元素引用保存到类实例中，并通过handleSubmit方法处理表单提交事件，该方法在控制台中记录输入值。由于输入元素的值不会在反应.js状态中维护，我们使用了ref而不是onChange事件来访问该值。

受控输入

与非受控输入不同，受控输入将其值存储在反应.js状态中，并通过onChange事件来更新该值。由于反应.js可以管理输入值，开发人员可以在输入值更改时执行逻辑，并确保输入值符合所需格式化或验证。这些功能使受控输入在开发复杂表单时非常有用。

以下是使用受控输入元素的示例：

class ControlledInput extends React.Component {
  state = {
    inputValue: ''
  }

  handleChange = (event) => {
    this.setState({inputValue: event.target.value});
  }

  handleSubmit = (event) => {
    console.log('Input Value: ', this.state.inputValue);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Input:
          <input type="text" value={this.state.inputValue} onChange={this.handleChange} />
        </label>
        <button type="submit">Submit</button>
      </form>
    );
  }
}

在此示例中，我们使用state对象存储输入值，并在handleChange方法中更新该值。由于输入元素的值由state管理，我们使用value和onChange属性来连接输入元素和反应.js状态。我们还使用handleSubmit方法处理表单提交事件，该方法在控制台中记录输入值。

总结

无论使用非受控或受控输入，反应.js提供了强大的工具来创建灵活的用户界面。非受控输入提供了简单性和性能优势，而受控输入则提供了更高级的功能，如格式化和验证。无论使用哪种输入，反应.js都可以帮助程序员轻松开发出交互式的用户界面。