无法使用 setstate 清除受控输入

Posted 2023-02-23

【中文标题】无法使用 setstate 清除受控输入

【英文标题】：Unable to clear controlled input with 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，您的代码应该可以正常工作。如果可能，请在此处分享您的整个组件（作为工作副本）。

更新了更多信息，谢谢！

【参考方案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 
/>

【讨论】：

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