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.state.value;中对该状态的后续调用

我仍然没有像我想要的那样清楚 - @Dan暗指的是 - 在触发onSubmit之后组件的重新渲染过程。

Answer 1

event.preventDefault();函数中的

handleSubmit表示禁用所有默认行为，包括刷新页面和清除字段。您可以自行清除输入框。

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

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

Answer 2

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

如果您想在表单提交后清除<input>，则需要在state.value内清除handleSubmit()，然后告诉<input>显示{在state.value内部{1}}。

处理<form> onSubmit React

2 个答案: