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

Posted

技术标签:

【中文标题】通过父组件的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()
       )
   

【讨论】:

以上是关于通过父组件的onClick更新组件状态的主要内容,如果未能解决你的问题,请参考以下文章

onClick 不会从 Child 组件更新 Parent 的状态

从子组件更新父状态在 reactjs 中不起作用

在设置子组件的数组状态并将其通过反应测验传递回父组件时出现问题

反应无状态子组件不会更新父组件中的状态更改

React - 通过事件onClick在子组件到父组件中显示所选列表项

通过孩子的状态 <Field> 组件更新父母道具