时间戳

首页 > 解决方案 > 反应多选形式仅将一个选项保存到数组

reactjs - 反应多选形式仅将一个选项保存到数组

问题描述

我正在尝试创建一个多选表单。但是当我提交时，只有第一个选项被保存到数组中，而不是所有选定的选项。我正在从位置集合中获取选项，并且我正在将表单提交到类别集合。可能是什么问题？

const handleInputChange = (e) => {
  setCategory({ ...category, [e.target.name]: e.target.value });
};

return (
    <div>
      <form onSubmit={handleSubmit}>
        <div className='form-group'>
          <select
            name='location'
            onChange={handleInputChange}
            size={locations.length}
            className='form-control'
            multiple
          >
            {locations.map((location) => (
              <option value={location.title}>
                {location.title}
              </option>
            ))}
          </select>
        </div>
        <button>Add</button>
      </form>
    </div>
  );

标签： reactjsforms

解决方案

请检查这个例子：

import React from 'react';
import MenuItem from '@material-ui/core/MenuItem';
import FormControl from '@material-ui/core/FormControl';
import Select from '@material-ui/core/Select';

export default class DropDownMenuExample extends React.Component {
    constructor(props) {
        super(props);
        this.state = {value: []};
    }

    handleChange(event) {
        let value = event.target.value;
        this.setState({value})
    };

    render() {
        return (
            <div>
                <FormControl>
                    <Select
                        labelId="demo-controlled-open-select-label"
                        id="demo-controlled-open-select"
                        value={this.state.value}
                        multiple
                        onChange={this.handleChange.bind(this)}
                    >
                        <MenuItem value={1}>Blue</MenuItem>
                        <MenuItem value={2}>Red</MenuItem>
                        <MenuItem value={3}>Green</MenuItem>
                        <MenuItem value={4}>Black</MenuItem>
                        <MenuItem value={5}>Purple</MenuItem>
                        <MenuItem value={6}>Yellow</MenuItem>
                        <MenuItem value={7}>Maroon</MenuItem>
                        <MenuItem value={8}>Gray</MenuItem>
                        <MenuItem value={9}>Silver</MenuItem>
                        <MenuItem value={10}>Gold</MenuItem>
                    </Select>
                </FormControl>
            </div>
        );
    }
}

推荐阅读