Question

在这里反应newb。尝试在子元素上（例如，动态创建但静态）设置className。单击子项，父项会接收事件并相应地更改子项的样式。在vanilla.js中微不足道，但想知道“反应方式”。

import React, { Component } from 'react';
import './App.css';

class App extends Component {   
  constructor(props) {
        super(props);
        this.state = { sel : "none"};
        this.handleChildClick = this.handleChildClick.bind(this);
    }
  render() {
    return (
      <div className="App">
        <header className="App-header">
            {this.state.sel}
            <div>
                <ChildClass onClick={this.handleChildClick}/>
            </div>      
        </header>
      </div>
    );
  }
  handleChildClick = (event) => {
    // console.log(event);
    // want to change background color of child by adding className
    this.setState({
        sel : event.target.innerHTML
    })  
  }
}
class ChildClass extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <div onClick={this.props.onClick}>
                div or li or button
            </div>
        )
    }
}
export default App;

--------编辑----

简单的javascript版本-寻找纯粹的反应方式

<html>
<head>
<style>
div {
    border: 1px solid black;
    display: inline-block;
    margin-right: 10px;
    padding: 2px 4px;
}
.selected {
    background-color: #09f;
}
</style>
</head>
<body>
<div id="d_1" class='clk'>one</div>
<div id="d_2" class='clk'>two</div>
<div id="d_3" class='clk'>three</div>

<script>
let ele = document.querySelectorAll('.clk');
ele.forEach(function(e,v,t) {
    e.onclick = setThis;
});
var sel = '';
function setThis(e) {
    if(sel.length > 0) {
        document.getElementById(sel).classList.remove('selected');
    }
    document.getElementById(e.target.id).classList.add('selected');
    sel = e.target.id;
}

</script>
</body>
</html>

Answer 1

我不知道这是否正是您想要的，但这是一个非常简单的示例。

class App extends React.Component {
  state = { childClass: "" };

  handleChildClick = e =>
    this.setState( {
      childClass: e.target.innerHTML,
    } );

  render() {
    return (
      <div className="App">
        <ChildClass
          childClass={this.state.childClass}
          onClick={this.handleChildClick}
        />
      </div>
    );
  }
}

const ChildClass = props => (
  <div onClick={props.onClick} className={props.childClass}>
    <li>blue</li>
    <li>red</li>
    <li>yellow</li>
  </div>
);

ReactDOM.render( <App />, document.getElementById( "root" ) );

.blue {
  background-color: blue;
}

.red {
  background-color: red;
}

.yellow {
  background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

评论后更新

如果我理解正确的话，这是根据您的纯JS代码编写的示例：）正如您所看到的，我在这里使用的是硬编码的div列表。这是因为我不知道您将如何生成div。也许您将从数组中获取它们。如果是这样，则此代码将更加实用。映射数组并根据其ID创建div，依此类推。但是，这是硬编码版本。

class App extends React.Component {
  state = { selected: "" };

  handleChildClick = e => this.setState( { selected: e.target.id } );

  render() {
    return (
      <div className="App">
        <ChildClass
          selected={this.state.selected}
          onClick={this.handleChildClick}
        />
      </div>
    );
  }
}

const ChildClass = props => (
  <div>
    <div
      id="d_1"
      onClick={props.onClick}
      className={props.selected === "d_1" ? "clk" : ""}
    >
      one
    </div>
    <div
      id="d_2"
      onClick={props.onClick}
      className={props.selected === "d_2" ? "clk" : ""}
    >
      two
    </div>
    <div
      id="d_3"
      onClick={props.onClick}
      className={props.selected === "d_3" ? "clk" : ""}
    >
      three
    </div>
  </div>
);

ReactDOM.render( <App />, document.getElementById( "root" ) );

.clk {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

以下是您可能如何生成div的地图版本。

const ChildClass = ( props ) => {
  const divs = [
    { id: "d_1", text: "one" },
    { id: "d_2", text: "two" },
    { id: "d_3", text: "three" },
  ];
  return (
    <div>
      {divs.map( el => (
        <div
          key={el.id}
          onClick={props.onClick}
          id={el.id}
          className={props.selected === el.id ? "clk" : ""}
        >
          {el.text}
        </div>
      ) )}
    </div>
  );
};

Answer 2

 <ChildClass
onClick={this.handleChildClick}
className={this.state.sel}
/>

您必须将className={this.props.className}添加到div中的ChildClass

反应添加类到子组件

简单的javascript版本-寻找纯粹的反应方式

2 个答案: