Question

为什么我总是手动设置React Input Component的值？在我的示例中，我可以删除value={this.state.email}和value={this.state.password}，代码有效且有效。但我在React Docs和他们的所有示例中都会看到，您应该在每次渲染时设置值。这是为什么？

function validate(email, password) {
  // true means invalid, so our conditions got reversed
  return {
    email: email.length === 0,
    password: password.length === 0,
  };
}

class SignUpForm extends React.Component {
  constructor() {
    super();
    this.state = {
      email: '',
      password: '',

      everFocusedEmail: false,
      everFocusedPassword: false,
      inFocus: '',
    };
  }

  handleEmailChange = (evt) => {
    this.setState({ email: evt.target.value });
  }

  handlePasswordChange = (evt) => {
    this.setState({ password: evt.target.value });
  }

  handleSubmit = (evt) => {
    if (!this.canBeSubmitted()) {
      evt.preventDefault();
      return;
    }
    const { email, password } = this.state;
    alert(`Signed up with email: ${email} password: ${password}`);
  }

  canBeSubmitted() {
    const errors = validate(this.state.email, this.state.password);
    const isDisabled = Object.keys(errors).some(x => errors[x]);
    return !isDisabled;
  }

  render() {
    const errors = validate(this.state.email, this.state.password);
    const isDisabled = Object.keys(errors).some(x => errors[x]);
    return (
      <form onSubmit={this.handleSubmit}>
        <input
          className={errors.email ? "error" : ""}
          type="text"
          placeholder="Enter email"
          value={this.state.email}
          onChange={this.handleEmailChange}
        />
        <input
          className={errors.password ? "error" : ""}
          type="password"
          placeholder="Enter password"
          value={this.state.password}
          onChange={this.handlePasswordChange}
        />
        <button disabled={isDisabled}>Sign up</button>
      </form>
    )
  }
}

ReactDOM.render(<SignUpForm />, document.body);

Answer 1

代码可能有效且有效，但您现在在两个地方拥有相同的值（输入）;输入元素的状态和反应状态。

这就是反应控制组件的原因。

＆＃34;在HTML中，表单元素（如input，textarea和select）通常会保持自己的状态并根据用户输入进行更新。在React中，可变状态通常保存在组件的state属性中，并且仅使用setState（）更新。＆＃34; - https://reactjs.org/docs/forms.html

这种做法使React成为真理的唯一来源。

而且，正如大多数人所知，只要你试图在两个地方追踪一个价值，你就会遇到很多问题

Answer 2

这是React控制形式和非React控制形式之间的区别。在React中使用不受控制的表单是完全可能的，但这会将表单限制为非常非常基本的形式。它也可能在未来产生潜在的问题，因为React应该是控制应用程序中所有内容的人。我认为使用受控表单是一种好习惯，因为根据表单输入，可以很容易地在页面中添加验证或其他动态元素。

我认为this blog post和this one可以更好地解释。

反映表单元素

2 个答案: