Question

我正在尝试从选择字段中选择多个值，但是我只能选择一个字段，并且从api中获取数据，并且在api端点中，我可以选择多个用户，例如user=1,2,3，并且我也希望选择多个用户在react js中，这是我的代码。

这是表格

         <select
              multiple={true}
              onChange={this.handleChange}
              value={this.state.selectedOptions}
              className="form-control btn-block"
              id="exampleFormControlSelect2 btn-block"
              style={{
                width: "200px",
                color: "rgba(19, 183, 96, 1.0)"
              }}
              name="idd"
            >
              {this.state.movies.map(c => (
                <option value={c.pk}>{c.user1}</option>
              ))}
            </select>

这是处理变更事件并获取数据

handleChange(event) {
    //this.setState({value: event.option});
    this.setState({
      value: Array.from(event.target.selectedOptions, item => item.value)
    });
  }

  // Get Data From Backend
  async componentDidMount() {
    try {
      const res = await fetch(config.apiUrl.reportModel);
      const movies = await res.json();
      // console.log(report);
      this.setState({
        movies
      });
    } catch (e) {
      console.log(e);
    }
  }

请帮助我停留在这里，我不知道该怎么解决

Answer 1

在选择字段中，道具将value={this.state.selectedOptions}更改为value={this.state.value}

有效的（简化的）代码段

class SomeComponent extends React.Component{
    state={
        value:null,
        movies:[{user1:'iRobot', pk:'1'},{user1:'Matrix', pk:'2'},{user1:'Hackers' , pk:'3'}]
    }

    handleChange(event) {
        this.setState({
             value : Array.from(event.target.selectedOptions, item => item.value)
        });
    }
    
    
    render(){
    return (
        <select
            multiple
            onChange={(e)=>console.log()}
            value={this.state.value}
        >
            {this.state.movies.map(movie => (
                <option value={movie.pk}>{movie.user1}</option>
            ))}
        </select>
    )
    }

}

ReactDOM.render(
    <SomeComponent />,
    document.getElementById("react")
);

<div id='react'></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 2

有一个库react-select，可以用来实现所需的功能。以下是该软件包的官方npm网站链接

https://www.npmjs.com/package/react-select

如何在React JS中选择多个值？

2 个答案: