Изменить стиль родительского элемента при нажатии дочернего элемента в React
Я новичок в React, я хочу знать, как изменить стиль div с идентификатором «parent» при нажатии на div с идентификатором «child».
<div id = "parent"></div>
#parent{display:block;}
var Products=React:createClass({
showHide: function(){
// change style of parent id's "display:block" to "display:none"
},
render: function(){
return (
<div id = "child" onclick = {this.showHide}>ABCD</div>
);
});
ReactDOM.render(<Products />,document.getElementById('parent'));
Ответы 1
React обрабатывает это как односторонний поток данных. Родительские компоненты взаимодействуют с дочерними компонентами через реквизиты, а дочерние компоненты связываются с родителем через реквизиты обратного вызова. Вам необходимо передать опору обратного вызова дочернему компоненту от родителя, который затем обновит состояние родителя, которое затем обновит стиль, либо путем переключения опоры style (встроенный стиль), либо путем переключения класса CSS с помощью опоры className.
Вот пример, в котором дочерний компонент обновляет цвет переднего плана родителя с помощью опоры style. onTrigger - это просто пример имени, поскольку вы не указали контекст того, почему дочерний элемент обновляет родительский, но его можно назвать как угодно. ChildComponent может использовать onTrigger для передачи любых данных обратно родительскому элементу, после чего родитель может обрабатывать их по мере необходимости, как показано здесь в функции handleTrigger.
const ChildComponent = ({ onTrigger }) => (
<div id = "child" onClick = {() => onTrigger("red")}>ABCD</div>
);
class ParentComponent extends React.Component {
constructor(props) {
super(props);
// Set the initial state value
this.state = { color: "green" };
// One of a few ways to bind the function
this.handleTrigger = this.handleTrigger.bind(this);
}
handleTrigger(color) {
this.setState({ color: color });
}
render() {
return (
<div id = "parent" style = {{ color: this.state.color }}>
<ChildComponent onTrigger = {this.handleTrigger} />
</div>
);
}
}