Как сохранить значение нескольких выбранных опций в ReactionJs

Question

Я пытаюсь сохранить несколько «категорий» при создании продукта. Я использую act-select2-wrapper , чтобы выбрать несколько категорий при создании продукта. Теперь у меня возникают проблемы с получением нескольких выбранных категорий товаров для сохранения в базе данных при создании продукта. Я получаю product_categories значения undefined Может кто-нибудь помочь мне решить эту проблему. Вот как я пытаюсь это сделать -

import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';
import TopNav from './../Layouts/Partials/TopNav';
import SidebarNavItem from './../Layouts/Partials/SidebarNavItem';
import { Link } from 'react-router-dom';
import Select2 from 'react-select2-wrapper';
import 'react-select2-wrapper/css/select2.css';
class CreateNewProduct extends Component { 

  constructor(props) {
    super(props);
    this.state = {
      newProduct: {
        name: '',
        description: '',
        product_categories: [],
        status: 1,
      },
    };
    this.handleInput = this.handleInput.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.productCategories = React.createRef();

  }

  handleInput(key, e){
    let state = Object.assign({}, this.state.newProduct);
    state[key] = e.target.value;
    this.setState({newProduct: state});
  }
  handleSubmit(e){
    console.log(this.productCategories.current.id);
    e.preventDefault();
    const product = {
      name: this.state.newProduct.name,
      description: this.state.newProduct.description,
      product_categories: this.productCategories.current.id,
      status: this.state.newProduct.status,
    }

    axios.post('/api/save-new-product', product).then((response) => {
      console.log(product);
    }).catch(err => {
    });
  }
  componentDidMount(){
    fetch('api/active-categories')
        .then(response => {
            return response.json();
        }).then(activeCategories => {
            this.setState({ activeCategories });
        });
  }

render() {
    const activeCategories = this.state.activeCategories;
    return (
      <React.Fragment>
        <TopNav/>
        <div className="container-fluid">
          <div className="row">
            <SidebarNavItem/>
            <main role="main" className="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
             <form className="uk-form-stacked" onSubmit={this.handleSubmit}>
                <div className="uk-margin">
                    <label className="uk-form-label" htmlFor="form-stacked-text">Product Name <span className="required-span">*</span></label>
                    <div className="uk-form-controls">
                      <input className="uk-input" id="form-stacked-text" type="text" placeholder="Product Name" name="name" required="required" onChange={(e) => this.handleInput('name', e)} />
                    </div>
                </div>
                <div className="uk-margin">
                   <label className="uk-form-label" htmlFor="form-stacked-select">Description</label>
                   <div className="uk-form-controls">
                      <textarea className="uk-textarea" name="description" id="description" placeholder="Write description here" onChange={(e) => this.handleInput('description', e)}></textarea>
                   </div>
                </div>
                <div className="uk-margin">
                  <label className="uk-form-label" htmlFor="form-stacked-text">Categories <span className="required-span">*</span></label>
                  <Select2
                     multiple={true}
                     data={activeCategories}
                     options={{
                          placeholder: 'Search Category',
                     }}
                     ref={this.productCategories}
                   />
                </div>
                <div className="uk-margin">
                    <div className="uk-form-label">Status</div>
                    <div className="uk-form-controls" onChange={(e) => this.handleInput('status', e)}>
                      <label className="radio-label"><input className="uk-radio" type="radio" name="status" value={1} defaultChecked /> Active</label>
                      <label className="radio-label"><input className="uk-radio right-side-radio" type="radio" name="status" value={0}/> Inactive</label>
                   </div>
                </div>     
               <hr/>
             <button type="submit" className="uk-button uk-button-primary uk-button-small float-right">Save</button>
         </form>
    </main>
   </div>
  </div>
 </React.Fragment>
 );
 }
}
export default CreateNewProduct;

Answer 1

Я думаю, вы должны использовать обратные вызовы onSelect и onChange вместо ссылок - вот так:

<Select2
   multiple={true}
   data={activeCategories}
   options={{
        placeholder: 'Search Category',
   }}
   onSelect={this.onSelect.bind(this)}
 />

и затем в onSelect:

onSelect(selected) {\
  // check format of selected param here
  const newProduct = {...this.state.newProduct}
  newProduct.product_categories = selected;
  this.setState({newProduct})
}