表单中的多个输入元素 - React答案

【问题标题】：multiple input elements in form - React表单中的多个输入元素 - React
【发布时间】：2020-03-21 08:20:01
【问题描述】：

这是一个简单的表单，它更新状态对象 onChange 并在提交时显示该状态对象。当有多个输入元素时，我无法让它工作。

谁能告诉我这段代码有什么问题？ onSubmit 在只有一个输入元素时有效，但在有多个输入元素时无效！

class ReactForm extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.validate = this.validate.bind(this);

    this.state = {
      name: "",
      email: ""
    };
  }

  handleChange(event) {
    event.preventDefault();
    const name = event.target.name;
    const value = event.target.value;
    this.setState({
      [name]: value
    });
  }

  validate(event) {
    event.preventDefault();
    console.log(this.state);
  }

  render() {
    return (
      <div>
        <form onSubmit={this.validate}>
          <div>
            <input
              type="text"
              name="name"
              value={this.state.name}
              onChange={this.handleChange}
            />
            <input
              type="email"
              name="email"
              value={this.state.email}
              onChange={this.handleChange}
            />
          </div>
        </form>
      </div>
    );
  }
}

ReactDOM.render(
  <ReactForm />,

  document.getElementById("root")
);

【问题讨论】：

标签： reactjs

【解决方案1】：

如果您有超过 1 个输入，则需要有一个提交按钮，如果需要，您可以添加一个隐藏的按钮：

<input type="submit" hidden />

这是一个代码框：https://codesandbox.io/s/suspicious-almeida-e3f00

这里有详细的解释：Why does a FORM with one text INPUT submit on enter while one with two text INPUTs does not?

【讨论】：

【解决方案2】：

我真的很喜欢都铎式的方法。

这是一种不同的方法，它也可以删除状态处理。但这可能需要 IE 和 Safari 的 polyfill。您可以使用FormData 访问表单值。

new FormData(e.target);

这里是工作沙箱链接：https://codesandbox.io/s/long-wind-ybl1w

希望这会有所帮助！

【讨论】：

【解决方案3】：

请添加元素输入和按钮。按钮应该有type="submit" 用于提交！

它会起作用的！

【讨论】：