处理 <form> onSubmit React 中的状态答案

【问题标题】：Dealing with state in <form> onSubmit React处理 <form> onSubmit React 中的状态
【发布时间】：2016-04-13 10:04:59
【问题描述】：

所以我开始使用 React 并试图将我的头脑围绕状态。我在表单上的 onSubmit 操作遇到了这个问题，它在触发后不会清除输入字段。一个相当微不足道的问题，但我觉得这里有一个更广泛的教训，关于我所缺少的整个组件的交互。

'use strict'
const SmithyForm = React.createClass({
  displayName: "SmithyForm",

  getInitialState: function() {
    return { placeholder: "tweet" };
  },
  handleChange: function(event) {
    this.setState({value: event.target.value});
  },
  handleSubmit: function(event) {
    $.post('/test', { data: this.state.value }).done(function(data) {
      console.log(data)
    });
    event.preventDefault();
   },
  render: function() {
    var placeholder = this.state.placeholder;
    return (
        <form onSubmit={this.handleSubmit}>
          <input type="text" placeholder={placeholder} onChange={this.handleChange} />
          <button> smithy</button>
        </form>
    );
  }
})

ReactDOM.render(<SmithyForm />, document.body )

所以，我的问题是：我的结构如何阻止 onSubmit 清除输入字段？（代码本身一切正常，组件呈现一个带有按钮的表单。当单击该按钮时，表单向 Node/Express 后端发出 ajax 请求，该后端将输入到输入字段中的文本发回。）

编辑/回答：我错过的两个部分是在 getInitialState 函数中设置的默认 value: "" 以及随后在渲染函数中对该状态的调用 var value = this.state.value;

有一点我还不是很清楚——@Dan 暗示的——是组件在 onSubmit 被触发后的重新渲染过程。

【问题讨论】：

感谢@sean 和@dan！这两个都是我正在寻找的确切答案。肖恩， preventDefault 是否会阻止反应默认行为？或者我对表单默认行为的理解只是为了缩小范围？
不过，有趣的是。按照你们的建议，将 this.setState 放入 Promise 时，它说它不是一个函数。
这意味着您的 this 对象是错误的。在 render():var self = this; 中保留对它的引用，然后在 onChange 属性中引用它：onChange={self.handleChange}

标签： javascript forms reactjs

【解决方案1】：

handleSubmit 函数中的event.preventDefault(); 表示禁用所有默认行为，包括刷新页面和清除字段。输入框由您自己清除。

最简单的方法是将状态设置回空（然后将显示占位符）。

 $.post('/test', { data: this.state.value }).done(function(data) {
      console.log(data)
       this.setState({
            value: ""
        })
});

【讨论】：

【解决方案2】：

在您的render() 函数中，您永远不会指定应该在<input> 元素中显示什么值。当你的组件第一次渲染时，它是空的；当你的组件随后被渲染时，React 的幕后 DOM 差异代码不会检测到对 <input> 元素的任何更改，因此不会重建它（意味着它之前包含的任何内容，现在仍然包含）。

如果你想在表单提交后清除<input>，你需要清除handleSubmit()里面的state.value，然后告诉<input>在render()里面显示state.value。

【讨论】：