mardi 22 septembre 2020

How can I save multiple checkboxes value together with select values in react

I have a form in react with checkboxes and a select from react-select. I want to save the values from checkboxes and the value from select options together as an array in the object. Right now the checkboxes value is saved separate in currency and the select values is saved separate in currencies, but I want all values to be saved in currencies . Is this possible? Hope it's not too confusing. My code looks like this so far.

The state with object:

constructor(props) {
        super(props)
        this.state = {
            currencies: [],
            currency: '',  
       }

The checkboxes:

  handleChange = input => event => {
        console.log(input);
        console.log(event.target.value);
        this.setState({[input] : event.target.value})
    }

\\\\\\\\\\\\\\\\

     <label style={label}>{strings.currency}</label>
       <div style={checkboxDiv}>
         {commonCurrencies.map((currency, index) => (
       <label style={checkboxLabel} key={index}>
       <input style={checkbox} type="checkbox" onChange={value => this.handleChange('currency')} value={currency} required> 
       </input>
         {currency}
     </label>
       ))}
       </div>

The react-select:

 handleSelectChange (field, options) {
        
        if(options.length === undefined) {
            this.setState({[field]: options.value});
        } else {
                for (var item = 0; item < options.length; item++) {
                    values.push(options[item].value);
                }
            }

            this.setState({[field]: values});
        }

\\\\\\\\\\\\\\\\\\\\\\\\\

  handleSelectChange(field, option) {
        this.props.handleSelectChange(field, option);
        return option
    }
\\\\\\\\\\\\\\\\\\

<Select styles={customStyles} menuColor='#502272' isMulti options={currencyData} placeholder={strings.searchCurrency} onChange={value => this.handleSelectChange("currenciesSendRetrieve", value)} value={values.currencyData}></Select>



Aucun commentaire:

Enregistrer un commentaire