在 Redux 中，如何获取用户输入答案

【问题标题】：In Redux, how to get user input在 Redux 中，如何获取用户输入
【发布时间】：2017-01-06 11:47:27
【问题描述】：

我有一个表单，如何在handleSubmit()方法中获取使用输入？

handleSubmit(e) {
    e.preventDefault()
    //how to get the user input?
}

render() {
    return (
        <div className="col-sm-4">
            <form onSubmit={this.handleSubmit}>
                <input type="text" placeholder="user"/>
                <input type="text" placeholder="comments"/>
                <input type="submit" hidden/>
            </form>
        </div>
        )
    }

到目前为止，我知道三种解决方案：第一个，使用refs，但是我看到很多人说我们应该避免使用它

第二个，每个<input>加onChange()，例如

class Example extends React.Component {

    state = {
      inputValue: ""
    };

    handleInputChanged(e) {
      this.setState({
        inputValue: e.target.value
      });
    }

    render() {
        return ( 
          <div>
            <input onChange={this.handleInputChanged.bind(this)} value={this.state.inputValue}>
            </div>
      );
  }
}

这个很好，有几个输入。但是如果表单有 20 个输入字段，那么有 20 种不同的 onChange 方法呢？

第三，使用一些 npm 模块，比如redux-form。

还有什么建议吗？谢谢

【问题讨论】：

标签： forms reactjs redux

【解决方案1】：

您实际上可以像这样在父表单上执行 onChange：

onChange(e) {
    switch(e.target.type) {
        case 'checkbox':
            this.setState({ [e.target.name]: e.target.checked });
            break;
        default:
            this.setState({ [e.target.name]: e.target.value });
            break;
    }
}

// in render
<form onChange={this.onChange.bind(this)}>
    <input name="foo1" />
    <input name="foo2" />
    <input name="foo3" />
    <input name="foo4" />
    <input name="foo5" />
    <input name="foo6" />
    <input name="foo7" />
    <input name="foo8" />
</form>

【讨论】：

【解决方案2】：

有一些库，如https://github.com/christianalfoni/formsy-react、https://github.com/prometheusresearch/react-forms。这些表单具有为表单提交、验证预先编写的附加功能。我认为如果表单很大，使用 refs 是一项乏味且不需要的任务，原因是如果它是受控表单，您需要访问受控组件的状态值，这会带来不必要的复杂性。您可以这样做，但最好使用预先编写的库。

【讨论】：