使用 Reactjs 清除输入字段？

IT技术 javascript reactjs
2021-04-16 17:11:44

我在下面使用一个变量。 

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在这种情况下有什么意义？

6个回答

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

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

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

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

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

whereel指的是组件。

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

在此处阅读更多相关信息。

应该只是this.inputTitle.value = "";。React 已弃用this.refs：facebook.github.io/react/docs/...
2021-05-28 17:11:44
知道了。而不是使用this.refs.inputTitle.value=""I used this.inputTitle=""，它做到了。
2021-06-09 17:11:44
'sendThru' 是 onClick 函数的事件处理程序，React 建议在您的构造函数方法中绑定 'this' 引用。示例constructor() { this.sendThru = this.sendThru.bind(this)}' or if you are not using ES6 classes for react component you could bind the this key word in your render method as onClick={this.sendThru.bind(this)}`
2021-06-18 17:11:44
您能否稍微扩展一下 sendthru 函数的“this”绑定的含义？照原样，当我单击时，出现错误cannot read property value of undefined
2021-06-20 17:11:44

声明输入标签的值属性（即value= {this.state.name}），如果你想清除这个输入值，你必须使用this.setState({name : ''})

PFB 工作代码供您参考：

<script type="text/babel">
    var StateComponent = React.createClass({
        resetName : function(event){
            this.setState({
                name : ''
            });
        },
        render : function(){
            return (
                <div>
                    <input type="text" value= {this.state.name}/>
                    <button onClick={this.resetName}>Reset</button>
                </div>
            )
        }
    });
    ReactDOM.render(<StateComponent/>, document.getElementById('app'));
</script>
Jhee whizz，唯一对我有用的解决方案。谢谢。
2021-05-30 17:11:44
你并不总是想要这个，每个状态变化都会导致重新渲染，有时这正是你想要的，但有时你想要更具体
2021-06-02 17:11:44
来自angular：这似乎是一种双向绑定方法，我喜欢。
2021-06-15 17:11:44
这仅在您还添加逻辑以this.state.name在输入中有按键按下时进行更新时才有效。否则它被冻结到''的初始值'this.state.name。
2021-06-15 17:11:44

我不太确定语法 {el => this.inputEntry = el}，但是在清除输入字段时，您会像提到的那样分配一个 ref。

<input type="text" ref="someName" />

然后在使用完输入值后的 onClick 函数中，只需使用...

this.refs.someName.value = '';

编辑

实际上 {el => this.inputEntry = el} 与我相信的相同。也许有人可以纠正我。el 的值必须从某处传入，作为参考。 

function (el) {
    this.inputEntry = el;
}

我使用 React 钩子有一个与 @Satheesh 类似的解决方案：

状态初始化： 

const [enteredText, setEnteredText] = useState('');

输入标签：

<input type="text" value={enteredText}  (event handler, classNames, etc.) />

在事件处理函数内部，使用来自输入表单的数据更新对象后，调用： 

setEnteredText('');

注意：这被描述为“双向绑定”

您可以使用 input type="reset" 

<form action="/action_page.php">
  text: <input type="text" name="email" /><br />  
  <input type="reset" defaultValue="Reset" />  
</form>
其它你可能感兴趣的问题
上一篇React Native 的默认样式单位是什么？ 下一篇React Formik 在 <Formik /> 之外使用 submitForm