Question

我是前端开发的新手，所以如果这是一个无知的问题，请原谅我。我使用ReactJS构建了一个包含多个表单组件的简单SPA。在我在线阅读的官方React文档和其他教程中，似乎能够处理表单提交，我还必须处理表单更改，即每次按键更新组件状态，如下所示：

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

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

这对我来说似乎很浪费，因为我只对提交的最终表格价值感兴趣。有没有办法在提交事件处理程序中访问提交的表单的值，以便我只能更新一次状态，并且无需处理任何非提交更改？

Answer 1

这可能看起来很浪费，但这正是React的做法：

https://reactjs.org/docs/forms.html

试图解决这个问题的任何方式都会比效率更高。这可能有助于避免在尝试跟踪所有输入值时重复代码：

当您需要处理多个受控输入元素时，可以为每个元素添加一个name属性，让处理程序函数根据event.target.name的值选择要执行的操作。

这样你只需要一个＆＃39; handleChange＆＃39;方法

Answer 2

在这种情况下，实际上不需要受控组件。将输入组件更新为：

<input type="text" name="username" required/>

现在只处理onSubmit。可以在以下位置检索该值：

event.target.username.value

添加属性＆＃34; required＆＃34;到输入标签进行自动验证。

处理表单提交而不处理更改？

2 个答案: