Question

所以我有这种形式，可以通过storeUserSearch实时更新搜索，这就是为什么未在输入中设置值的原因。我正在尝试实现一个图标，该图标删除单击时输入字段中的内容，并运行动作storeUserSearch（''）。

第二个onClick本身没有问题。我只是想让第一个onClick正常工作，然后让它们同时运行，以便我的点击同时执行。

<form>
  <input
    className="searchBox fas fa-search"
    type="search"
    placeholder="Search"
    onChange={event => this.props.storeUserSearch(event.target.value) } />
    <i className="fas fa-times-circle" onClick={event => event.target.parentElement.input} onClick={event => this.props.storeUserSearch('')}> </i>
</form>

编辑：弄清楚如何通过以下方式重置值：

onClick={event => event.target.parentElement.firstChild.value=''}

只需要弄清楚现在如何组合onClicks。

Answer 1

为什么要在同一元素上编写两个onClick？只需在其click事件上传递一个方法，然后在其中写入所有逻辑即可。即：

<i className="fas fa-times-circle" onClick={this.handleIconClick}> </i>
// and in handleIconClick function write the logic.
handleIconClick = (e)=>{
  e.target.parentElement.firstChild.value='';
  this.props.storeUserSearch('');
}

Answer 2

您无法定义两个onClick道具，一个将覆盖另一个。您可以尝试类似

onClick={(event) => {event.target.parentElement.firstChild.value=''; this.props.storeUserSearch('')}}

请注意两个单独的语句之间的分号

Answer 3

每个组件只能具有1个onClick属性，不能多个。我不确定storeUserSearch函数应该做什么，因为您的代码段中省略了该函数，但是根据您的解释，我认为您可以实现与以下类似的操作：

class SearchForm extends React.Component {
  constructor () {
    super();
    this.state = {
      inputValue: ''
    };
  }
  
  render() {
    return (
        <div>
         <input 
            type="text"
            value={ this.state.inputValue }
            onChange={ 
              e => {
               this.setState({inputValue: e.target.value}) 
              } 
            }
          />
            
          <input 
            type="button" 
            value="Clear input" 
            onClick={
              () => { 
                this.setState({inputValue: ''}) 
              }
            }/>
          
          <span style={{ display: 'block' }}>Current textbox state: <span style={{ color: 'blue' }}>{this.state.inputValue}</span></span>
        </div>
    );
  }
}

ReactDOM.render(<SearchForm></SearchForm>, document.querySelector('#app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="app"></div>

基本上，我们创建一个由2个input元素（1个text和1个button）组成的组件。我采用的方法是简单地将value属性设置为等于我们组件的state.inputValue，属性每次发生change事件时都会更新。

我们只是在按下清除按钮时将state.inputValue属性硬编码为''。

在输入之外删除表单输入值

3 个答案: