Question

我想更新＆＃39; change_color＆＃39;在第二个类中，当值发生更改时自动在第一个类中呈现它。假设，＆＃39;第二＆＃39;组件作为“第一”的孩子。成分

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

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>)
  }
}

Answer 1

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

Answer 2

也许你可以尝试这个，只需创建一个容器组件，并将你想要更改的值设置为容器组件的状态，添加一个方法来更改状态值，然后，你可以使用＆＃34;这个.props.handleColorChange＆＃34;调用子组件中父组件的方法。

＆＃13;

class Container 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>
    <First 
      color={change_color} 
      handleColorChange={handleColorChange}
    />
    <Second 
      color={change_color} 
      handleColorChange={handleColorChange}
    />
   </div>
   );
  }
}

class First extends Component {
  constructor() {
     super();
  }
  render() {
   const {color} = this.props;
   return(
    <span>now, the color is {color}</span>
   )
  }
}

class Second extends Component {
  constructor() {
     super();
  }
  const {handleColorChange} = this.props;
   return(
    <button onClick={handleColorChange}>click to change color</button>
   )
}

＆＃13;

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

2 个答案: