Question

给出以下内容：

constructor () {

    super();
    this.state = {
        inputs : [
            { type: 'email', placeholder: 'Email Address' }
        ]
    };

}

render () {
  return {
    <div>

    {
      // Itterates over all inputs in the current state
      this.state.inputs.map((item, i) => (
        <Input key={i} id={'input-' + i} ref={'input-' + i} type={item.type} placeholder={item.placeholder} />
      ))
    }

     <button onClick={this.submit.bind(this)}>submit</button>

   </div>

  };
}

提交表单后如何获取值？ e.g。

submit () {
  // Need to loop over inputs and get values for all of them.
}

Answer 1

我已经使用一些最佳实践重新构建了代码。如果您对此有任何疑问，请与我们联系。

state = {
    inputs : [
        { type: 'email', placeholder: 'Email Address', id: 'email' },
        { type: 'text', placeholder: 'Your Name', id: 'name' },
    ]
},

submit = () => {
  // Need to loop over inputs and get values for all of them.
  this.state.inputs.map((input) => {
    const node = ReactDOM.findDOMNode(this.refs[input.id]);
    // do what you want to do with `node`
  })
},

renderInput = (input) => {
  // element index as key or reference is a horrible idea
  // for example if a new input is unshifted it will have the same 
  // reference or key, which will render the idea of key, reference invalid

  return (
    <Input 
      id={input.id} 
      key={input.id} 
      ref={input.id} 
      type={input.type} 
      placeholder={input.placeholder} 
    />
  );
}

render () {
  return (
    <div>
      { this.state.inputs.map(this.renderInput) }
      <button onClick={this.handleSubmit}>submit</button>
    </div>
  );
}

我找到的问题

将key设置为索引是反模式。阅读更多内容https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318
在render中绑定this是一个反模式。使用es7类属性来解决这个问题。或者您可以绑定构造函数中的方法。阅读有关约束https://medium.com/@housecor/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56#.uzdapuc4y

解决方案1：

constructor(props) {
  super(props);
  this.handleSubmit = this.handleSubmit.bind(this);
}

解决方案2：

handleSubmit = () => {
  // do you stuff
}

Answer 2

您可以使用map循环覆盖它们以获得与您创建它们的方式类似的值

submit () {
  // Need to loop over inputs and get values for all of them.
      this.state.inputs.map( function(item, i) {
        console.log(ReactDOM.findDOMNode(this.refs['input-' + i]).value);
      }.bind(this))
}

Answer 3

在知道表单输入的反应中，您应该在每个输入或元素中使用refs属性。如下所示

<input type="text" ref="myInput" />

然后点击或在您的地图功能中，您可以遍历所有参考。

handleClick: function() {
if (this.refs.myInput !== null) {
    var input = this.refs.myInput;
        var inputValue = input.value;

}

}

希望这对你有所帮助。

如何循环表单输入并获得反应中的值

3 个答案: