Как сохранить флажки нескольких категорий в массиве объекта json в React?

Question

Я создаю страницу для создания поста, где пользователь может выбрать несколько категорий,

У меня проблема при отправке данных с запросом поста с объектом нескольких категорий, я не могу собратьнесколько идентификаторов категорий в одном объекте для отправки с другими данными.

Состояния по умолчанию

constructor (props){
    super(props);
    this.state = {
        title: '',
        menuItems: [],
        shortDescription: '',
        body: RichTextEditor.createEmptyValue(),
        metaDescription: ''
    };
    this.onChangeHandler = this.onChangeHandler.bind(this);
}

При изменении обработчика для других полей

onChangeHandler = (event) => {
    const target = event.target;
    const value = target.value;
    const name = target.name;
    this.setState({
        [name] : value
    })
}

Обработчик изменения категории, который возвращает новый объект массива каждой категории id

categoryChangeHandler = (e, data) => {
    let selectedMenuItems = {
        categoryId: data.value,
    }
    console.log(selectedMenuItems);
}

Извлечение списка категорий из API

{this.state.menuItems.map((menuItem) =>
    <Grid.Column key={menuItem.id} width={4}>
        <Checkbox label={menuItem.title} name={menuItem.title} 
        key={menuItem.id} 
        value={menuItem.id}
        onChange={(e, data) => this.categoryChangeHandler(menuItem.key, data)} />
    </Grid.Column>
)}

Answer 1

Вам необходимо добавить новое свойство в вашем штате для сбора данных флажков, например selectedMenuItems:

    constructor (props){
     super(props);
     this.state = {
        title: '',
        menuItems: [],
        shortDescription: '',
        selectedMenuItems: [], //new property
        body: RichTextEditor.createEmptyValue(),
        metaDescription: ''
     };
     this.onChangeHandler = this.onChangeHandler.bind(this); //you don't need this line as you are using and arrow function
}

Затем внесите следующие изменения в ваш обработчик изменений:

categoryChangeHandler = (e) => {
    const name = e.target.name;
    let selectedMenu = this.state.selectedMenuItems;
    selectedMenu[name] = e.target.checked;
    this.setState({
       selectedMenuItems : selectedMenu
    });
}

Затем, наконец, вызовите этот обработчик следующим образом:

{this.state.menuItems.map((menuItem) =>
    <Grid.Column key={menuItem.id} width={4}>
        <Checkbox label={menuItem.title} name={menuItem.title} 
        key={menuItem.id} 
        value={menuItem.id}
        onChange={this.categoryChangeHandler} />
    </Grid.Column>
)}

Желательно не использовать функцию стрелки непосредственно в функции рендеринга, так как она создает новую функцию каждый раз при визуализации компонента.Это может вызвать проблемы с производительностью.

Answer 2

Вы можете написать отдельный обработчик изменения флажка, который хранит все значения ваших флажков в одном объекте JSON в вашем состоянии.

handleCheckBoxChange(e) {
        const tempState = {
            checkboxValues: {
                ...this.state.checkboxValues,
                [e.target.name]: e.target.checked
            }
        }
        this.setState(tempState)
    }

пример: https://jsfiddle.net/69z2wepo/312818/