如何在 React.js 的另一个组件中更新组件状态变量的值？

Posted 2023-02-23

【中文标题】如何在 React.js 的另一个组件中更新组件状态变量的值？

【英文标题】：How to update the value a component's state variable in another component in React.js?

【发布时间】：2018-02-23 03:23:00

【问题描述】：

我想在第二类中更新“change_color”的值，并在值改变时自动在第一类中呈现它。 假设“第二”组件是“第一”组件的子组件。

解决了。代码被编辑，它就是答案。

class First extends Component 
  constructor() 
     super();
     this.state = 
       change_color: false
     
     this.handleChange = this.handleChange.bind(this);
  
  handleChange() 
    this.setState(
       change_color: true
    )
  
  render() 
   console.log(this.state.change_color);
   return(<div><Second colorChange=this.handleChange /></div>)
  


class Second extends Component 
  constructor() 
     super();
  
  render() 
    return(<div><button onClick=this.props.colorChange /></div>)
  

【问题讨论】：

ReactJS Two components communicating的可能重复

第一类是第二类的父类，反之亦然，还是它们完全不相关？这改变了答案

是的，假设“第二”组件是“第一”组件的子组件。

非常感谢大家。我忘记了什么。解决了。在父组件中获取一个函数并在那里更改状态变量值并将其传递给子组件，然后在那里调用它以更新子组件中的状态变量值。如果其他人遇到像我一样的情况，对其代码进行必要的编辑会有所帮助。

【参考方案1】：

也许你可以试试这个，只要做一个容器组件，把你想要改变的值设置成容器组件的状态，添加一个改变状态值的方法，然后，你可以使用“this.props. handleColorChange”在子组件中调用父组件的方法。

class ParentComponent extends Component 
  constructor() 
     super();
     this.state = 
       change_color: false
     
  
  handleColorChange= () => 
    const change_color = this.state;
    this.setState = 
       change_color: !change_color
     
  
  render() 
   const change_color = this.state,
    handleColorChange = this;
   return (
   <div>
    <ChildComponent1
      color=change_color 
      handleColorChange=handleColorChange
    />
    <ChildComponent2 
      color=change_color 
      handleColorChange=handleColorChange
    />
   </div>
   );
  


class ChildComponent1 extends Component 
  constructor() 
     super();
  
  render() 
   const color = this.props;
   return(
    <span>now, the color is color</span>
   )
  


class ChildComponent2 extends Component 
  constructor() 
     super();
  
  const handleColorChange = this.props;
   return(
    <button onClick=handleColorChange>click to change color</button>
   )

【讨论】：

你能稍微编辑一下这个东西吗，假设“第二”组件是“第一”组件的子组件？

谢谢伙计。我忘记了什么。解决了。在父组件中获取一个函数并在那里更改状态变量值并将其传递给子组件，然后在那里调用它以更新子组件中的状态变量值。如果其他人遇到像我一样的情况，对其代码进行必要的编辑会有所帮助。

【参考方案2】：

您需要做的是提升状态。创建一个具有颜色状态和更改颜色功能的新组件。然后将相应的属性作为道具传递给第一个和第二个组件，并在它们内部调用函数来更改颜色。有意义吗？

【讨论】：

谢谢哥们。我忘记了什么。解决了。在父组件中获取一个函数并在那里更改状态变量值并将其传递给子组件，然后在那里调用它以更新子组件中的状态变量值。如果其他人遇到像我一样的情况，对其代码进行必要的编辑会有所帮助。

不太明白你的意思。你想让我为你编写一个例子吗？我认为解释足以回答您的问题

是的确实是..我什么时候说错了..？你是非常正确的人:)

哦，只是因为我和其他人的回答相同，但你将他的答案标记为正确，而我的答案相同，只是没有代码示例。我认为解释会很清楚:(

是的.. 很好，但他也编写了整个代码并使事情变得容易理解，这确保他在这个问题上花了很多时间，因为我只能标记一个答案，所以我标记了他的.. 有无非就是这个兄弟。