如何在React中获取文本框的值？

Z时代
2024-01-10
分类：问答

我刚刚开始使用React.js，但不确定是否有一种特殊的方法来获取文本框的值，该方法是在这样的组件中返回的：

var LoginUsername = React.createClass({
  render: function () {
    return (
      <input type="text" autofocus="autofocus" onChange={this.handleChange} />
    )
  },
  handleChange: function (evt) {
    this.setState({ value: evt.target.value.substr(0, 100) });
  }
});

回答：

如文档中所述，您需要使用

。要进行输入您需要在其上指定两个道具

- 每次更改state输入value都会将组件设置为输入的函数

-来自组件的输入值state（this.state.value例如）

例：

  getInitialState: function() {
    return {value: 'Hello!'};
  },
  handleChange: function(event) {
    this.setState({value: event.target.value});
  },
  render: function() {
    return (
      <input
        type="text"
        value={this.state.value}
        onChange={this.handleChange}
      />
    );
  }