无法使用 setstate 清除受控输入答案

【问题标题】：Unable to clear controlled input with setstate无法使用 setstate 清除受控输入
【发布时间】：2019-11-14 15:13:41
【问题描述】：

当前正在尝试使用 setState 清除受控输入，

向输入字段添加一个值并使用 setState 清除它

清除状态的函数

createNewBoard = (e) => {
  e.preventDefault();
  const newItem = { boardname: this.state.currentValue, todo: []};
  const updatedList = [...this.state.boards, newItem]
  this.setState({ 
    boards: updatedList, 
    currentValue: '' 
 });
}

将 props 传递给组件

render() {
    return(
      <>
        { this.state.isBoardOpen ? 
        <ActiveCreateBoard 
          toggleCreateBoard={this.toggleCreateBoard} 
          onChange={this.onChange} 
          currentValue={this.currentValue}
          createNewBoard={this.createNewBoard} 
        /> : <CreateBoard toggleCreateBoard={this.toggleCreateBoard}/> }

        <ShowAllBoards boards={this.state.boards}/>
      </>
    )
  }

不更新输入字段的组件本身

const ActiveCreateBoard = ({ toggleCreateBoard, onChange, currentValue, createNewBoard }) => {
    return(
        <div className="card">
            <div className="card-body">
                <form onSubmit={createNewBoard}>  
                    <h4>Pick a board name</h4>
                    <input 
                    type="text" 
                    onChange={onChange} 
                    value={currentValue}/>
                </form>
            </div>
            <button onClick={toggleCreateBoard}>close</button>
        </div>
    )
}

this.setState 正在清除 state 中的 currentValue，但输入字段的值并未反映 state 中的更新

【问题讨论】：

请添加来自render() 设置currentValue 的行。
如果您成功地从this 和this.state 中解构createNewBoard 和onChange，您的代码应该可以正常工作。如果可能，请在此处分享您的整个组件（作为工作副本）。
更新了更多信息，谢谢！

标签： javascript reactjs

【解决方案1】：

您的输入字段未更新，因为您正在传递this.currentValue，这将是未定义的：

<ActiveCreateBoard 
  toggleCreateBoard={this.toggleCreateBoard} 
  onChange={this.onChange} 
  currentValue={this.currentValue}
  createNewBoard={this.createNewBoard} 
/>

相反，您需要从 state 中传递值。

改用this.state.currentValue:

<ActiveCreateBoard 
  toggleCreateBoard={this.toggleCreateBoard} 
  onChange={this.onChange} 
  currentValue={this.state.currentValue} // <---
  createNewBoard={this.createNewBoard} 
/>

【讨论】：

没问题。我们都去过那里:)