如何使用用户数组和 axio get 在 react js 中调用复选框中的 onchange 函数?

Question

我正在尝试在复选框中获取用户数组，该用户数组的元素来自 JSON 占位符。我想在带有 onchange 属性的复选框中显示这些值，但不知何故它什么也没显示。这是我到目前为止所做的。

在这里，我已经初始化了状态，并在句柄单击中e了值，但它没有出现在复选框上，我得到的一个建议是为每个元素创建单独的更改处理程序，但是我怎样才能在更改时分别获取它们。我已将状态初始化为 { 用户：[] }

componentDidMount(){
axios.get('https://jsonplaceholder.typicode.com/users')
.then (res => {
console.log(res)
this.setState({
users: res.data
})
})
}
handleChange = (e) => {
e.target.value;
console.log(e)
debugger
}

<div className="multiselect">
<div className="selectBox">
<select>
<option>Select an option</option>
</select>
<div className="overSelect" ></div>
</div>
<div id="checkboxes">
<label htmlFor ="one">
<input type="checkbox" checked={this.state.users} id="one" onChange={(e) => this.props.handleChange("users", e)} /></label>
</div>
</div>
</Fragment> 

Answer 1

我想你想要这样的东西。 在用户集合中，您需要找到正在切换的用户，切换isSelected键，然后设置状态。checked键在render呼叫中查找user.isSelected;一开始不需要定义它，因为undefined的计算结果为 false。

class App1 extends React.Component {
constructor(props) {
super(props);
this.state = {
users: []
};
}
handleChange(user) {
// get the user id
const userId = user.id;
// check the state, if a user is selected, toggle it
this.setState(prevState => ({
users: prevState.users.map(usr => {
usr.id === userId
? { ...usr, isSelected: !usr.isSelected }
: usr;
})
}));
}
render() {
const { users } = this.state;
return (
<div>
{Array.isArray(users) &&
users.length &&
users.map((u, idx) => {
<div key={`${idx}-${u.id}`}>
<label htmlFor={`${idx}-${u.id}`}>{u.name}</label>
<input
type="checkbox"
checked={u.isSelected}
onChange={() => this.handleChange(u)}
/>
</div>;
})}
</div>
);
}
}