通过父组件的onClick更新组件状态

Posted 2023-02-22

【中文标题】通过父组件的onClick更新组件状态

【英文标题】：Update component state by onClick of parent component

【发布时间】：2021-01-07 22:49:52

【问题描述】：

我在应用程序中的目标是，当单击按钮时，将操作设置为新的并提供给子组件。一旦子组件收到此值，它应该显示来自 div 的文本。 在进一步的实现中，我将添加另一个按钮，单击此按钮时，它将设置要编辑的操作。子组件应自动接收该值并基于此返回另一个 div。

let actionToPerform = "";

    function actionState(action)
       if(action === 'new')
           actionToPerform = 'new'
       else
           actionToPerform = 'edit'
       
    

 <button onClick=() => actionState('new')>Create new Shoppinglist</button>
 <button onClick=() => actionState('edit')>Edit Shoppinglist</button>
 <Edit action=actionToPerform/>

子组件：

export default class Edit extends React.Component 


    constructor(props)
        super(props);
        this.state = actionToPerform: this.props.action
    

    

    showTitle() 
        if(this.state.actionToPerform === 'new')
            return <div>new Shoppinglist</div>
        else if(this.state.actionToPerform === 'edit')
            return <div>edit</div>
        else
            return <div>nothing to show</div>
        
    



   render() 
       return (
           this.showTitle()
       )
   

我知道我应该以某种方式使用 componentDidMount 和 componentUpdate 来实现这一点，但无法做到。 现在，在加载页面时，它会触发 onClick 操作，我不知道为什么。当我点击按钮时，什么都没有发生

【参考方案1】：

父组件：

当您更新 actionToPerform 时，您的组件不知道并且不会重新渲染，您需要将其保留在其 state 中：

state = 
  actionToPerform: ""


updateState(actionToPerform)
    this.setState( actionToPerform )


<button onClick=() => this.updateState('new')>Create new Shoppinglist</button>
<button onClick=() => this.updateState('edit')>Edit Shoppinglist</button>
<Edit action=actionToPerform/>

现在，当您单击其中一个按钮时，状态的值会更新，并且组件会重新渲染，将新值传递给子级。

子组件：

您不应该从 props 设置状态的初始值，请参阅 Anti-pattern: Unconditionally copying props to state

您甚至可以将其全部删除，因为您可以根据 props 值进行条件渲染：

export default class Edit extends React.Component 
  render() 
    return this.props.actionToPerform === "new" ? (
      <div>new Shoppinglist</div>
    ) : this.props.actionToPerform === "edit" ? (
      <div>edit</div>
    ) : (
      <div>nothing to show</div>
    );
  

【参考方案2】：

您应该使用parentt 组件中的状态并将该状态作为道具传递给子（编辑）组件并使用它，而不是使用Edit 组件中的状态。

父.js

actionState = (action) => 
   if(action === 'new')
      this.setState( actionToPerform: 'new' )
    else
      this.setState( actionToPerform: 'edit' )
   

render() 
 return (
   <div>
     <button onClick=() => this.actionState('new')>Create new Shoppinglist</button>
     <button onClick=() => this.actionState('edit')>Edit Shoppinglist</button>
     <Edit action=this.state.actionToPerform/>
   </div>
 )

child.js

export default class Edit extends React.Component 

    showTitle() 
        if(this.props.actionToPerform === 'new')
            return <div>new Shoppinglist</div>
         else if(this.props.actionToPerform === 'edit')
            return <div>edit</div>
         else
            return <div>nothing to show</div>
        
    

   render() 
       return (
           this.showTitle()
       )