用Reactjs清除输入字段？ [英] Clear an input field with Reactjs?

问题描述

我正在使用下面的变量。

I am using a variable below.

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"></textarea>
       <button className="btn btn-info" onClick={this.sendthru}>Add</button> 

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

Once I activate {this.sendthru} I want to clear my input fields. However, I am uncertain how to do so.

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

Also, as shown in this example, it was pointed out to me that I should use the ref property for input values. What I am unclear of is what exactly does it mean to have {el => this.inputEntry = el}. What is the significance of el in this situation?

推荐答案

我假设你已经完成了'sendThru'功能的'this'绑定。

Let me assume that you have done the 'this' binding of 'sendThru' function.

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

The below functions clears the input fields when the method is triggered.

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

参考可以写成内联函数表达式：

Refs can be written as inline function expression:

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

其中 el 引用组件。

当refs写成如上所述时，React每次更新都会看到一个不同的函数对象，ref会在调用之前立即调用null与组件实例。

When refs are written like above, React sees a different function object each time so on every update, ref will be called with null immediately before it's called with the component instance.

详细了解这里。

这篇关于用Reactjs清除输入字段？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！