Обработка нескольких дочерних компонентов в React
Я пытался искать везде и не мог найти ничего, связанного с моим вариантом использования, возможно, я ищу неправильные термины.
У меня есть ситуация, когда у меня есть панель с 3 значками, я ищу, чтобы установить один значок «активным», изменив его класс.
Значок представляет собой пользовательский компонент, который имеет следующий код
export default class Icon extends Component {
state = {
selected : false,
}
setSelected = () => {
this.setState({
selected : true
})
}
setUnselected = () => {
this.setState({
selected : false
})
}
render() {
var classStatus = '';
if (this.state.selected)
classStatus = "selected-icon"
else
classStatus = "icon"
return <div className = {classStatus} onClick = {this.props.onClick}><FontAwesomeIcon icon = {this.props.icon} /></div>
}
}
В моем родительском компоненте у меня есть следующий код
export default class MainPage extends Component {
handleClick(element) {
console.info(element);
alert("Hello!");
}
render() {
return (
<div className = "wrapper">
<div className = "page-header">
<span className = "menu-voice">File</span>
<span className = "menu-voice">Modifica</span>
<span className = "menu-voice">Selezione</span>
</div>
<div className = "page-main">
<span className = "icon-section">
<div className = "top-icon">
<Icon icon = {faFileCode} onClick = {() => this.handleClick(this)} />
<Icon icon = {faCodeBranch} onClick = {() => this.handleClick(this)} />
<Icon icon = {faMagnifyingGlass} onClick = {() => this.handleClick(this)} />
</div>
</span>
<span className = "files-section">Files</span>
<span className = "editor-section"></span>
</div>
<div className = "page-footer">
Footer
</div>
</div>
);
}
}
Я пытаюсь добиться того, чтобы при нажатии одного из дочерних компонентов Icon он установил выбранное состояние в истинное управление родительским компонентом, в то же время, пока один из них верен, я бы хотел, чтобы родитель установил чтобы ложные другие два.
Я пытался использовать функцию useRef, но это не лучшая практика.
Как правильно это сделать? Отправляя также это в функцию handleClick, она просто возвращает класс MainPage вместо дочернего элемента. Любое предложение, по крайней мере, где я должен смотреть?
заранее спасибо
Ответы 2
Вы должны определить конструктор в своем компоненте класса:
constructor(props) {
super(props);
this.state = { selected : false };
}
Вы также должны вызвать функцию, которая изменяет состояние при нажатии на значок. onClick = {this.props.onClick} не меняет состояние
Я предлагаю не сохранять состояние в значке, так как он не знает, для чего еще вы его используете. Просто попросите компонент значка получить статус «выбран» из реквизита. например
export default class Icon extends Component {
render() {
var classStatus = '';
if (this.props.selected)
classStatus = "selected-icon"
else
classStatus = "icon"
return (
<div className = {classStatus} onClick = {this.props.onClick}>.
<FontAwesomeIcon icon = {this.props.icon} />
</div>
);
}
};
Затем вы можете просто управлять состоянием родителя, где оно должно быть:
export default class MainPage extends Component {
constructor(props) {
super(props);
this.state = { selectedOption : '' };
}
handleSelectOption(newValue) {
this.setState({ selectedOption: newValue });
}
isSelected(value) {
return value === this.state.selectedOption;
}
render() {
return (
<div className = "wrapper">
{ /* etc... */ }
<div className = "page-main">
<span className = "icon-section">
<div className = "top-icon">
<Icon
icon = {faFileCode}
onClick = {() => this.handleSelectOption("File")}
selected = {isSelected("File")}
/>
<Icon
icon = {faCodeBranch}
onClick = {() => this.handleSelectOption("Modifica")}
selected = {isSelected("Modifica")}
/>
{ /* etc... */ }
</div>
</span>
</div>
{ /* etc... */ }
</div>
);
}
};
К вашему сведению, хуки реакции — это функциональный компонент, который не использует структуру, основанную на классах. Я удалил этот несвязанный тег.