网络技术问题 | React.js 测验 |第 2 组 |问题 14

问题描述

在 React.js 中如何实现获取输入框的值？

解答

在 React.js 中，获取输入框的值需要通过 state 来实现。

我们可以通过在输入框的 onChange 事件中调用 setState 方法来更新组件的状态，从而获取到输入框的值。

以下是一个示例代码片段：

class InputComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { inputValue: "" };
  }

  handleInputChange = (e) => {
    this.setState({ inputValue: e.target.value });
  };

  render() {
    return (
      <div>
        <input type="text" onChange={this.handleInputChange} />
        <p>Input value: {this.state.inputValue}</p>
      </div>
    );
  }
}

在上面的代码中，我们定义了一个 InputComponent 组件，它包含了一个输入框和一个展示输入框值的段落。

在组件初始化时，我们初始化了一个空字符串作为默认输入框的值。

然后，在输入框的 onChange 事件中，我们通过调用 setState 方法来更新组件状态，将输入框的值更新到组件中。

最后，我们通过展示组件状态中的 inputValue 属性，展示出实时改变的输入框值。

这就是在 React.js 中获取输入框值的方法。