无法用setstate清除受控输入

Question

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

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正在清除状态中的currentValue，但输入字段的值没有反映状态中的更新

Answer 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} 
/>