Reactjs 根据子组件的类改变组件的状态答案

class Parent extends React.Component{ constructor(){ super(); this.state = { pageState: false } } changeState(){ this.setState({pageState: !this.state.pageState}); } render(){ return( <div id="app"> <ul> <Child sendState={this.changeState.bind(this)} heading="Home"/> <Child sendState={this.changeState.bind(this)} heading="About"/> <Child sendState={this.changeState.bind(this)} heading="Contact"/> <Child sendState={this.changeState.bind(this)} heading="Work"/> </ul> </div> ) } } render(<Parent/>, document.getElementById("app-wrapper"));

class Child extends React.Component{ render(){ return( <li className="list_element"> <div className="card_block" onClick={this.props.sendState.bind(this)}> <h2>{this.props.heading}</h2> </div> <li> ) } }

【解决方案1】：

您需要从<Child /> 组件内的点击事件处理程序将className 作为道具发送到您的<Parent /> 组件。通过在 cmets 中进行必要的更改来尝试以下代码。工作小提琴：https://jsfiddle.net/kartalerkoc/rfra9uep/3/

更新：根据您对 JQuery 的评论，我更新了 <Child /> 组件的 onClickCard() 和 render() 方法以使用 refs 解决您的问题。另外，更新了小提琴。

class Parent extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      pageState: false
    }
    // bind this to your changeState function
    this.changeState = this.changeState.bind(this);
  }

  // Revise your changeState function
  changeState(textClassName){
    if (textClassName.includes("current")) {
      console.log("true - current is in class name");
        this.setState({pageState: !this.state.pageState});
    }
  }

  // edit the prop function for <Child />
  render(){
    return(
      <div id="app">
        <ul>
          <Child heading={"Home"} changeState={this.changeState} />
          <Child heading={"About"} changeState={this.changeState} />
          <Child heading={"Contact"} changeState={this.changeState} />
          <Child heading={"Work"} changeState={this.changeState} />
        </ul>
      </div>

    )
  }

}

class Child extends React.Component{
 // add onClick event handler for card
 onClickCard() {
    let refValue = "li"+this.props.heading;
    let textClassName = this.refs[refValue].className;
    this.props.changeState(textClassName);
 };

 // Edit your onClick event handler on div element
 render(){
 let refValue = "li"+this.props.heading;
 console.log(refValue);
  return(
    <li className={"list_element current"} id={refValue} ref={refValue}>
     <div className="card_block" onClick={this.onClickCard.bind(this)}>
      <h2>{this.props.heading}</h2>
     </div>
   </li>
  )
 }
};

ReactDOM.render(<Parent />, document.getElementById('app-wrapper'));

【讨论】：

基本上，一旦
使用 jquery 在视图中，“当前”类就会被添加到父
...我要试试这个...跨度>

我已经更新了onClickCard() 函数和Child 组件内的render() 方法。此外，更新了小提琴。但是，请注意 refValues 应该是唯一的，因为它们是元素的 id。此外，在使用 React 时，通常不需要 JQuery 来操作 className。

我看了一下小提琴......并检查了它以查看 DOM 结构，似乎所有

都有“当前”类：/ 我有点困惑.抱歉，如果我在这里指出了一些不正确的地方，但我对这个 lil 事情有点困惑：/ 因为当前类最初没有添加，它只是在触发某些事件后添加，并且仅添加到当前的

查看，而不是其他...：/

别担心，您最好要求澄清一下。因此，在这里我模拟了您已经触发了将“当前”添加到

元素类的事件的情况。因此，只需从 className 中删除“当前”并尝试它。因为您的触发器稍后会将“当前”添加到 className。没问题。事情就是在 React 中使用 ref 属性。如果您还有其他问题，请再次询问。

谢谢 :) 我会试试这个，如果需要更多说明，一定会让你知道... :)