Question

我正在查看有关绑定输入以响应状态的教程。我不明白的是，为什么我需要将其绑定到州而不是本地，因为它不会导致渲染。

就我而言，我有一个登录表单，在本教程中，它是发送消息表单。这个想法是使用反向数据流在提交时将该值发送到App.js（parent）。看起来像这样：

    public Image Icon
    {
        get
        {
            Image controlImage = null;
            AttributeCollection attrCol =
                    TypeDescriptor.GetAttributes(Type);
            ToolboxBitmapAttribute imageAttr = (ToolboxBitmapAttribute)
                attrCol[typeof(ToolboxBitmapAttribute)];
            if (imageAttr != null)
            {
                controlImage = imageAttr.GetImage(Type);
            }

            return controlImage;
        }
    }

是否有理由使用setState而不是仅使用不会导致渲染的局部变量？

Answer 1

您不必这样做，无需在状态中存储用户名就可以使其工作。您所要做的就是监听提交事件，并使用ref在那时获取输入值。

class Login extends Component {
  handleSubmit(e) {
    e.preventDefault();
    console.log(this.refs.username.value)
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input ref="username" type="text" />
        <button type="submit">Submit</button>
      </form>
    );
  }
});

不过，使用React的通常方法是将输入值存储在状态中，并在每次值更改时更新状态。这称为controlled component，可确保输入值和状态始终彼此一致。

class Login extends Component {
  constructor() {
      super()
      this.state = {
          username: ''
      };
  }

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

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <input onChange={e => this.setState({ username: e.target.value })} type="text" value={this.state.username} />
          <button type="submit">Submit</button>
        </form>
      </div>
    )
  }
}

除其他事项外，它使验证输入值或在需要时对其进行修改更容易。例如，您可以通过在状态更改时将状态转换为大写来强制执行大写。

Answer 2

输入字段的值必须更改为新值，这就是为什么在on change事件中将状态设置为下一个事件值的原因。如果您未设置状态，则即使用户输入该值，该值也将相同。

希望这会有所帮助，学习愉快。

反应输入绑定到状态与局部变量

2 个答案: