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

IT技术 javascript html reactjs react-jsx
2021-05-12 11:26:52

我刚开始使用 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) });
  }
});
2个回答

文档中所述,您需要使用受控输入要进行输入控制,您需要在其上指定两个props

  1. onChange-每次输入更改时将组件设置statevalue输入的功能
  2. value- 来自组件的输入值statethis.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}
      />
    );
  }

更具体地说是关于 textarea -这里

只需将您的输入更新为该值

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

您的文本输入值始终处于状态中,您可以通过 this.state.textVal 获得相同的值