javascript - 在 onSubmit React 中处理状态

Question

所以我开始尝试使用 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 中对该状态的调用。状态值；

有一件事我仍然没有像我想的那样清楚——这是@Dan 暗示的——是组件在 onSubmit 被触发后的重新渲染过程。

Answer 1

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

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

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