Javascript 在<；表格>；非委托反应

所以我开始玩弄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 )

“严格使用”
常量SmithyForm=React.createClass({
显示名称：“SmithyForm”，
getInitialState:函数（）{
返回{占位符：“tweet”}；
},
handleChange:函数（事件）{
this.setState（{value:event.target.value}）；
},
handleSubmit:函数（事件）{
$.post（'/test'，{data:this.state.value}）.done（函数（数据）{
console.log（数据）
});
event.preventDefault（）；
},
render:function（）{
var placeholder=this.state.placeholder；
返回(
铁匠
);
}
})
ReactDOM.render（，document.body）

所以，我的问题是：我的结构如何阻止onSubmit清除输入字段？（代码本身可以正常工作，组件使用按钮呈现表单。单击按钮时，表单向Node/Express后端发出ajax请求，后者将返回输入字段中输入的文本。）

编辑/回答：我遗漏的两个部分是一个默认的

值：“

在getInitialState函数中设置，以及随后在呈现函数

var value=this.state.value中调用该状态

有一件事我仍然不太清楚，@Dan提到的是组件在提交后的重新招标过程
 
event.preventDefault（）handleSubmit
函数中的code>表示禁用所有默认行为，包括刷新页面和清除字段。由您自己清除输入框

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

在
render（）
函数中，从不指定
元素中应显示的值。第一次渲染组件时，组件为空；后续渲染组件时，React的幕后DOM diffing代码不会检测到
元素的任何更改，因此不会重建它（意味着它以前包含的内容现在仍然包含）

如果你想在表单提交后清除
，你需要清除
handleSubmit（）
中的
state.value
，然后告诉
显示
state.value
中的
render（）
谢谢@sean和@dan！这两个都是我一直在寻找的答案。肖恩，这是默认行为吗？或者我对表单默认行为的理解只是为了缩小范围？有趣的是。当将this.setState按你们两人的建议放入承诺时，它表示它不是函数。这意味着您的
this
对象是错误的。在
render（）
中保留对它的引用：
var self=thisonChange={self.handleChange}

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