javascript - 使用 Reactjs 清除输入字段？

Question

我正在使用下面的变量。

var newInput = {
   title: this.inputTitle.value,
   entry: this.inputEntry.value    
};

这是我的输入字段使用的。

<input type="text" id="inputname" className="form-control" ref={el => this.inputTitle = el} />   
<textarea id="inputage" ref={el => this.inputEntry = el} className="form-control" />
<button className="btn btn-info" onClick={this.sendthru}>Add</button>

一旦我激活{this.sendthru}我想清除我的输入字段。但是，我不确定该怎么做。

此外，如本示例所示，有人向我指出我应该使用 ref输入值的属性。我不清楚的是 {el => this.inputEntry = el} 到底意味着什么？ 。 el有什么意义？在这个情况下？

Answer 1

让我假设您已经完成了“sendThru”函数的“this”绑定(bind)。

以下函数在触发该方法时清除输入字段。

sendThru() {
    this.inputTitle.value = "";
    this.inputEntry.value = "";
}

Refs 可以写成内联函数表达式:

ref={el => this.inputTitle = el}

其中 el 指的是组件。

当像上面这样编写 refs 时，React 每次都会看到不同的函数对象，因此每次更新时， ref 将在使用组件实例调用之前立即使用 null 进行调用。

了解更多信息here .