Question

我想要一个可重复使用的文本组件。我的todo应用程序应该在创建新项目后清除文本框。所以我用一个更新的列表和一个空白文本框setState。但是文本框没有被清除。

console.log将文本框呈现为空白字符串。但旧的字符串徘徊不前。

有什么问题？

var Textbox = React.createClass({

  getDefaultProps: function() {
    return {
      text: ""
    };
  },

  handleChange: function(event) {
    this.props.callback(event.target.value);
  },

  render: function() {
    console.log("textbox render", this.props.text)
    return <div>
      <label>{this.props.label}</label>
      <input
        type="text"
        defaultValue={this.props.text}
        onChange={this.handleChange} />
    </div>
  }
});

以下是添加项目的方法的摘录，this.state.newItem是包含文本的状态项。

  addNewItem: function() {
    console.log("add new");
    this.state.items.push({
      display: this.state.newItem,
      id: uuid()
    });
    this.setState({
      newItem: "",
      items: this.state.items
    });
  },

当然，Textbox使用newItem呈现：返回添加新的

Answer 1

您需要使用onChange将文本框的文本保存到其状态，然后将文本框传递给道具value={this.state.value}。然后，当您要清除文本框时，只需将状态值设置为''。您可能希望初始状态为return {value:''};所以，实际上，只需使用默认道具并使其成为默认状态等。

React-为什么文本框在渲染时没有清除？

1 个答案: