Question

我有一个表单，如何在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，但我可以看到有很多人说我们应该避免使用它

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

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。

还有其他建议吗？感谢

Answer 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>

Answer 2

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

在Redux中，如何获得用户输入

2 个答案: