Решил изучить реакт, и вот споткнулся...
Пример того, как я пытался это сделать
class FormUserItem extends React.Component {
constructor(props) {
super(props);
// Эта привязка обязательна для работы `this` в колбэке.
this.handleChecked = this.handleChecked.bind(this);
}
handleChecked(e) {
this.props.onChange(e.target);
}
render() {
let className = "user__item";
if (this.props.isChecked) {
className += " active";
}
return (
<label>
<input
className={className}
name={"usr_"+this.props.id}
type="checkbox"
checked={ this.props.isChecked}
onChange={this.handleChecked}
/>
{this.props.name}
</label>
);
}
}
class FormUserItems extends React.Component {
constructor(props) {
super(props);
this.state = { isChecked: false };
// Эта привязка обязательна для работы `this` в колбэке.
this.handleChecked = this.handleChecked.bind(this);
}
handleChecked(e) {
this.setState((state) => {
return {isChecked: !state.isChecked}
});
}
handleSubmit(event) {
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
{ this.props.users.map((user) =>
<FormUserItem key={user.id} name={user.name} isChecked={this.state.isChecked} onChange={this.handleChecked} id={user.id}/>
)}
<div>
<input type="submit" value="Отправить" />
</div>
</form>
);
}
}
const users = [
{ id: 1, name: "User-1" },
{ id: 2, name: "User-2" },
{ id: 3, name: "User-3" }
];
ReactDOM.render(<FormUserItems users={users} />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
Но состояние при клике меняется сразу у всех чекбоксов.
Как в данной логике поставить состояние конкретному чекбоксу?
Или данный подход совсем не верный?
Если так, то приведите пример верного решения, чтобы не применять заведомо неправильный вариант.