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

【问题标题】：Update component state by onClick of parent component通过父组件的onClick更新组件状态
【发布时间】：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 操作，我不知道为什么。当我点击按钮时，什么都没有发生

【问题讨论】：

标签： javascript reactjs components

【解决方案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()
       )
   }

【讨论】：