Javascript 将类添加到子组件_Javascript_Reactjs

Javascript 将类添加到子组件

javascript reactjs

Javascript 将类添加到子组件,javascript,reactjs,Javascript,Reactjs,我是新手。试图在（动态创建但在示例中是静态的）子元素上设置className。单击子项，父项接收事件并相应地更改子项的样式。在vanilla.js中微不足道，但想知道“反应方式” import React，{Component}来自'React'；导入“/App.css”；类应用程序扩展组件{ 建造师（道具）{ 超级（道具）； this.state={sel:“无”}； this.handleChildClick=this.handleChildClick.bind（this）； } ren

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

import React，{Component}来自'React'；
导入“/App.css”；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
this.state={sel:“无”}；
this.handleChildClick=this.handleChildClick.bind（this）；
}
render（）{
返回(
{this.state.sel}
);
}
handleChildClick=（事件）=>{
//console.log（事件）；
//要通过添加类名更改子对象的背景色吗
这是我的国家({
sel:event.target.innerHTML
})  
}
}
类ChildClass扩展组件{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
div或li或按钮
)
}
}
导出默认应用程序；

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

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


div{
边框：1px纯黑；
显示：内联块；
右边距：10px；
填充物：2px4px；
}
.选定{
背景色：#09f；
}
一
二
三
让ele=document.querySelectorAll（'.clk'）；
要素forEach（功能（e、v、t）{
e、 onclick=setThis；
});
var-sel=''；
函数setThis（e）{
如果（选择长度>0）{
document.getElementById（sel.classList.remove（'selected'）；
}
document.getElementById（e.target.id）.classList.add（'selected'）；
sel=e.target.id；
}

您必须将

className={this.props.className}

添加到

ChildClass

中的

div

您必须将

className={this.props.className}

添加到

ChildClass

中的

div

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

类应用程序扩展了React.Component{
状态={childClass:：}；
handleChildClick=e=>
此.setState（{
子类：e.target.innerHTML，
} );
render（）{
返回(
);
}
}
const ChildClass=props=>(
蓝色的
红色的
黄色的
);
render（，document.getElementById（“根”））
.blue{
背景颜色：蓝色；
}
瑞德先生{
背景色：红色；
}
黄先生{
背景颜色：黄色；
}
我不知道这是否正是您想要的，但这里有一个非常简单的示例

类应用程序扩展了React.Component{
状态={childClass:：}；
handleChildClick=e=>
此.setState（{
子类：e.target.innerHTML，
} );
render（）{
返回(
);
}
}
const ChildClass=props=>(
蓝色的
红色的
黄色的
);
render（，document.getElementById（“根”））
.blue{
背景颜色：蓝色；
}
瑞德先生{
背景色：红色；
}
黄先生{
背景颜色：黄色；
}

为什么不在这里将类名，sel
传递给您的子组件？我遗漏了什么吗？需要在单击not init时从父级传递类名。父状态中的“sel”只是为了确保我正在传递事件。targetYou不能指定类似的内容，我认为，我的意思是在点击事件之后传递道具。但是，您可以传递带有空值的道具，然后根据单击处理程序对其进行更改。这对你合适吗？另外，什么将在这里指定类名？目标的innerHTML
与您的示例相同？可以但不希望将类设置为“本地”。我想从父节点动态引用dom节点。说一堆生成的div，但只有一个可以是红色的。所以，给这个上色，把前面的颜色去掉。在javascript中很平凡，但对“纯”反应很好奇。然后，在你的问题中再解释一下：）我可以用几种不同的方式写你想要的东西，可能作为新手，但所有这些都包括我的想象力。我们如何获得类名，如何保持哪个元素将使用这个类名，等等？例如，我可以保留一个state属性，在这里指定元素（以某种方式），并将该值传递给子组件。根据这个值，我可以在元素中指定类。但是，这可能不再适合你了。所以，试着给出所有的细节。为什么不把类名，sel
传递给您的子组件呢？我遗漏了什么吗？需要在单击not init时从父级传递类名。父状态中的“sel”只是为了确保我正在传递事件。targetYou不能指定类似的内容，我认为，我的意思是在点击事件之后传递道具。但是，您可以传递带有空值的道具，然后根据单击处理程序对其进行更改。这对你合适吗？另外，什么将在这里指定类名？目标的innerHTML与您的示例相同？可以但不希望将类设置为“本地”。我想从父节点动态引用dom节点。说一堆生成的div，但只有一个可以是红色的。所以，给这个上色，把前面的颜色去掉。在javascript中很平凡，但对“纯”反应很好奇。然后，在你的问题中再解释一下：）我可以用几种不同的方式写你想要的东西，可能作为新手，但所有这些都包括我的想象力。我们如何获得类名，如何保持哪个元素将使用这个类名，等等？例如，我可以保留一个state属性，在这里指定元素（以某种方式），并将该值传递给子组件。根据这个值，我可以在元素中指定类。但是，这可能不再适合你了。所以，试着给出所有的细节。很有趣，谢谢。您在init上将子类绑定到父类（？可能是错误的词）。我
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;

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

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