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

问题描述

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

My goal in the app is, that when button is clicked, the action is set to new and given to the child component. As soon as the child component receives this value, it should show the text from the div.At further implementation, I will add another button, on click of this button, it will set the action to edit. The child component should recieve the value automatically and based on this, returns another 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动作，我不知道为什么。当我单击按钮时，什么也没发生

I know I should work somehow with componentDidMount and componentUpdate to fulfill this, but was not able to do it.Right now, at loading page, it triggers the onClick action, I don't know why. When I click on the button, nothing else happens

推荐答案

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

Instead of using state in Edit component, you should use the state in parentt component and pass that state to child (Edit) component as prop and use that.

parent.js

parent.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()
       )
   }

这篇关于通过父组件的onClick更新组件状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！