Javascript 反应：多个选择（通过Ctrl或Alt）

我不能选择多个值。我怎样才能修好它

import React from "react";
import ReactDOM from "react-dom";

class FlavorForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: ["grapefruit", "coconut"] };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({ value: [event.target.value] });
  }

  handleSubmit(event) {
    alert("Your favorite flavor is: " + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Pick your favorite flavor:
          <select
            multiple={true}
            value={this.state.value}
            onChange={this.handleChange}
          >
            <option value="grapefruit">Grapefruit</option>
            <option value="lime">Lime</option>
            <option value="coconut">Coconut</option>
            <option value="mango">Mango</option>
          </select>
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

ReactDOM.render(<FlavorForm />, document.getElementById("root"));

从“React”导入React；
从“react dom”导入react dom；
类FlavorForm扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={value:[“葡萄柚”、“椰子”]}；
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
手变（活动）{
this.setState（{value:[event.target.value]}）；
}
handleSubmit（事件）{
警报（“您最喜欢的口味是：“+this.state.value”）；
event.preventDefault（）；
}
render（）{
返回(
选择您最喜欢的口味：
葡萄柚
石灰
椰子
芒果
);
}
}
render（，document.getElementById（“根”））；

您需要使用

e.target.options

而不是

e.target.value

然后循环并返回/设置所选选项数组的状态：

使用forEach：

handleChange (e) {
  const options = e.target.options;
  let value = []
  options.forEach((option)=> option.selected && value.push(option.value))
  this.setState({ value })
}

使用reduce：

handleChange (e) {
  const value = e.target.options.reduce((selected, option)=> option.selected ? [...selected , option.value] : selected , [])

  this.setState({ value })
}

---

您还需要向

select

元素添加

size

属性

 <select
   multiple={true}
   value={this.state.value}
   onChange={this.handleChange}
   size={4}
 >

---

将允许用户选择最多4个选项

您需要获取当前选择的所有选项的值：

class-FlavorForm扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={value:[“葡萄柚”、“椰子”]}；
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
手变（活动）{
const value=Array.from（event.target.options）//获取所有选项的数组
.filter（el=>el.selected）//删除未选中
.map（el=>el.value）；//获取值
this.setState（{value}）；
}
handleSubmit（事件）{
警报（“您最喜欢的口味是：“+this.state.value”）；
event.preventDefault（）；
}
render（）{
返回(
选择您最喜欢的口味：
葡萄柚
石灰
椰子
芒果
);
}
}
render（，document.getElementById（“根”））