reactjs – React – 如何获取输入字段的值？

反应15及以下

根据React文档和教程,正确地做事情.您正在编写一个基于两件事呈现的UI：

>组件的属性,由无论哪个父创建该组件的实例声明,该父实体可以在其整个生命周期中进行修改,以及
>组件自身的内部状态,它可以在其自身的生命周期中自行修改.

你没有做的是生成一个输入元素DOM节点,然后键入.您正在生成一个必须显示可操作的文本字符串的UI,并且操作会更改组件的状态,这可能会导致重新投递.国家永远是最终的权威,而不是DOM. DOM是一个事后的想法,它只是你正在使用的特定UI框架.

所以,要做好事情,你的组件有一个状态值,它通过输入字段显示,我们可以通过使UI元素将更改事件发回到组件中来进行更新：

var Component = React.createClass({
  getInitialState: function() {
    return {
      inputValue: ''
    };
  },render: function() {
    return (
      //...
      <input value={this.state.inputValue} onChange={this.updateInputValue}/>
      //...
    );
  },updateInputValue: function(evt) {
    this.setState({
      inputValue: evt.target.value
    });
  }
});

您输入的输入元素,没有任何事情发生在您的输入元素,事件被截获并立即被杀死,React触发事件的updateInputValue函数.该功能要求React更新组件的状态,使其具有正确的值,然后React可以使用新的更新重新使用UI,因此只有UI显示您输入了一封信.所有这一切发生在几毫秒的时间内,所以看起来你正常打字,但这绝对不是发生了.

基于评论的增编

UI输入表示状态值(如果用户在中间关闭它的选项卡,并且选项卡被还原,会发生什么情况呢)如果所有这些值被还原,那么这个状态).这可能会使您感觉像一个大型表单需要几十甚至一百个输入表单,但是React是以可维护的方式建模您的UI：您没有100个独立的输入字段,您有一组相关的输入,因此您可以捕获每个组合在一个组件中,然后构建您的“主”表单作为组的集合.

MyForm:
  render:
    <PersonalData/>
    <AppPreferences/>
    <ThirdParty/>
     ...

这比一个巨大的单一形式组件更容易维护.将组分割成具有状态维护的组件,其中每个组件一次只负责跟踪几个输入字段.

你可能会觉得写出所有的代码是一件麻烦的事情,但这是一个虚假的储蓄：开发人员 – 谁不是你,包括未来的你,实际上受益匪浅,看到所有这些输入明确地联系在一起,因为它使代码路径更容易追踪.但是,您可以随时优化.例如,您可以编写状态链接器

MyComponent = React.createClass({
  getInitialState() {
    return {
      firstName: this.props.firstName || "",lastName: this.props.lastName || "" 
      ...: ...
      ...
    }
  },componentWillMount() {
    Object.keys(this.state).forEach(n => {
      let fn = n + 'Changed';
      this[fn] = evt => {
        let update = {};
        update[n] = evt.target.value;
        this.setState(update);
      });
    });
  },render: function() {
    return Object.keys(this.state).map(n => {
      <input
        key={n} 
        type="text"
        value={this.state[n]}
        onChange={this[n + 'Changed']}/>
    });
  }
});

当然,这是有改进的版本,所以打了https://npmjs.com,搜索一个你最喜欢的React状态链接解决方案.开源大部分是关于发现别人已经完成的工作,而不是从头开始编写一切.

反应16(和15.5过渡)

从React 16(和从15.5开始软启动),不再支持createClass调用,需要使用类语法.这改变了两件事情：明显的类语法,也是createClass可以“免费”执行的thiscontext绑定,因此确保事情仍然工作,确保您使用“胖箭头”符号为上下文保留匿名函数onWhatever处理程序,例如我们在代码中使用的onChange：

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

  render: function() {
    return (
      //...
      <input value={this.state.inputValue} onChange={evt => this.updateInputValue(evt)}/>
      //...
    );
  },updateInputValue: function(evt) {
    this.setState({
      inputValue: evt.target.value
    });
  }
});