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

Question

我在应用程序中的目标是，当单击按钮时，将操作设置为新的并提供给子组件。一旦子组件收到这个值，它就应该显示来自 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 操作，我不知道为什么。当我点击按钮时，没有其他事情发生

Answer 1

父组件：当您更新组件时，actionToPerform您的组件不知道并且不会重新呈现，您需要将其保存在其state：state = {&nbsp; actionToPerform: ""}updateState(actionToPerform){&nbsp; &nbsp; this.setState({ actionToPerform })}<button onClick={() => this.updateState('new')}>Create new Shoppinglist</button><button onClick={() => this.updateState('edit')}>Edit Shoppinglist</button><Edit action={actionToPerform}/>现在，当您单击其中一个按钮时，状态的值会更新并且组件会重新呈现，将新值传递给子组件。子组件：您不应该从 设置状态的初始值props，请参阅反模式：无条件地将道具复制到状态您甚至可以将它们全部删除，因为您可以根据props值进行条件渲染：export default class Edit extends React.Component {&nbsp; render() {&nbsp; &nbsp; return this.props.actionToPerform === "new" ? (&nbsp; &nbsp; &nbsp; <div>new Shoppinglist</div>&nbsp; &nbsp; ) : this.props.actionToPerform === "edit" ? (&nbsp; &nbsp; &nbsp; <div>edit</div>&nbsp; &nbsp; ) : (&nbsp; &nbsp; &nbsp; <div>nothing to show</div>&nbsp; &nbsp; );&nbsp; }}

Answer 2

您应该使用组件中的状态，而不是在组件Edit中使用状态parentt，并将该状态作为 prop 传递给子（编辑）组件并使用它。父类.jsactionState = (action) => {&nbsp; &nbsp;if(action === 'new'){&nbsp; &nbsp; &nbsp; this.setState({ actionToPerform: 'new' })&nbsp; &nbsp;} else{&nbsp; &nbsp; &nbsp; this.setState({ actionToPerform: 'edit' })&nbsp; &nbsp;}}render() {&nbsp;return (&nbsp; &nbsp;<div>&nbsp; &nbsp; &nbsp;<button onClick={() => this.actionState('new')}>Create new Shoppinglist</button>&nbsp; &nbsp; &nbsp;<button onClick={() => this.actionState('edit')}>Edit Shoppinglist</button>&nbsp; &nbsp; &nbsp;<Edit action={this.state.actionToPerform}/>&nbsp; &nbsp;</div>&nbsp;)}孩子.jsexport default class Edit extends React.Component {&nbsp; &nbsp; showTitle() {&nbsp; &nbsp; &nbsp; &nbsp; if(this.props.actionToPerform === 'new'){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return <div>new Shoppinglist</div>&nbsp; &nbsp; &nbsp; &nbsp; } else if(this.props.actionToPerform === 'edit'){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return <div>edit</div>&nbsp; &nbsp; &nbsp; &nbsp; } else{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return <div>nothing to show</div>&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp;render() {&nbsp; &nbsp; &nbsp; &nbsp;return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;this.showTitle()&nbsp; &nbsp; &nbsp; &nbsp;)&nbsp; &nbsp;}