通过父组件的 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 = {

  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，请参阅反模式：无条件地将道具复制到状态

您甚至可以将它们全部删除，因为您可以根据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>

    );

  }

}

Answer 2

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

父类.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>

 )

}

孩子.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()

       )

   }