我有以下问题。
我有一个react组件，它在一个很好的列表上进行过滤器搜索，但我想用一个按钮清除输入字段，如果我向输入字段添加一个值属性，我可以在 setState 中设置它，但它会停止onChange 开始工作，因为它在列表上进行过滤器搜索：
我创建了以下内容，但这仍然不起作用。
<input type="text" ref="form" placeholder="Search indicators" className="uk-width-1-1" onChange={this.handleChange} />
<button className="uk-button uk-width-1-1" onClick="React.findDOMNode(this.refs.form).reset()"><i className="uk-icon-undo"></i></button>
将值设置为空作为
handleClick = () => {
ReactDOM.findDOMNode(this.refs.form).value = "";
}
是的 onClick 需要一个函数或一个值而不是一个字符串。也React.findDOMNode()已弃用。你应该使用ReactDOM.findDOMNode();
class Hello extends React.Component {
handleChange = (e) => {
}
handleClick = () => {
ReactDOM.findDOMNode(this.refs.form).value = "";
}
render() {
return (
<div>
<input type="text" ref="form" placeholder="Search indicators" className="uk-width-1-1" onChange={this.handleChange} />
<button className="uk-button uk-width-1-1" onClick={this.handleClick}><i className="uk-icon-undo"></i>click</button>
</div>
)
}
}
ReactDOM.render(<Hello />, document.getElementById('app'));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.js"></script>
<div id="app"></div>使用状态并更改输入值的状态也是一个更好的主意。
作为
class Hello extends React.Component {
constructor() {
super()
this.state = {
valueAttr : ''
}
}
handleChange = (e) => {
this.setState({valueAttr: e.target.value});
}
handleClick = () => {
this.setState({valueAttr: ''})
}
render() {
return (
<div>
<input type="text" ref="form" placeholder="Search indicators" className="uk-width-1-1" value = {this.state.valueAttr} onChange={this.handleChange} />
<button className="uk-button uk-width-1-1" onClick={this.handleClick}><i className="uk-icon-undo"></i>click</button>
</div>
)
}
}
ReactDOM.render(<Hello />, document.getElementById('app'));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.js"></script>
<div id="app"></div>我个人更喜欢第二种方法。但是你可以用任何你觉得舒服的方式来做。
在这里，onClick="React.findDOMNode(this.refs.form).reset()"您将字符串分配给按钮的 onClick 值，而不是函数，如果您想分配一个函数，它应该看起来像onClick={React.findDOMNode(this.refs.form).reset}"或onClick={() => React.findDOMNode(this.refs.form).reset()}
接下来，如果我findDOMNode没记错的话，它在 React 中已被弃用，因此您应该为此使用 ReactDOM。
最后，我怀疑是否存在reset方法，所以我认为您应该尝试直接改变输入值。
试试这个
onClick={() => this.refs.form.value = ''}
只需使用：
this.refs.form.getInputNode().value = '';
应该做的伎俩