时间戳

首页 > 解决方案 > 如何使用用户数组和 axio get 在反应 js 中调用复选框中的 onchange 函数？

javascript - 如何使用用户数组和 axio get 在反应 js 中调用复选框中的 onchange 函数？

问题描述

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

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

    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>

标签： javascripthtmlarraysajaxreactjs

解决方案

我想你想要这样的东西。在您的用户集合中，您需要找到正在切换的用户，切换isSelected键，然后设置状态。钥匙在您的电话中checked寻找；它不需要首先定义，因为它将评估为假。user.isSelectedrenderundefined

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>
        );
    }
}

推荐阅读