Как я могу вызвать функцию onchange в флажках, используя пользовательский массив и axio get in реагировать на js?

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 ищет user.isSelected в вашем render звонке;сначала его не нужно определять, так как 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>
        );
    }
}