删除输入之外的表单输入值答案

【问题标题】：Delete form input value outside of input删除输入之外的表单输入值
【发布时间】：2019-08-15 05:30:41
【问题描述】：

所以我有一个通过 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。

【问题讨论】：

标签： javascript html reactjs forms redux

【解决方案1】：

为什么要在同一个元素上编写两个 onClick？只需在其单击事件上传递一个方法并在那里编写所有逻辑。即：

<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('');
}

【讨论】：

好点。不知道为什么我不尝试这个。可能是睡眠不足。

【解决方案2】：

你不能定义两个onClick 属性，一个会覆盖另一个。您可以尝试类似

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

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

【讨论】：

这段代码给了我一个编译失败的错误。控制台内部是一个解析错误：结束时出现意外标记。我尝试手动写入，然后尝试复制粘贴。两次都出错。
@RobertC 这个呢<i className="fas fa-times-circle" onClick={event => event.target.parentElement.input; this.props.storeUserSearch('');}> </i>
@Abk 这也不起作用。给我解析错误：意外的令牌，预期的“}”并在控制台中引用分号作为问题。

【解决方案3】：

每个组件只能有 1 个onClick 属性，不能有多个。我不确定storeUserSearch 函数应该做什么，因为它在您的代码 sn-p 中被省略，但根据您的解释，我认为您可以实现类似于下面的操作：

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 属性硬编码为''。

【讨论】：