Как я могу выбрать несколько значений в реагировать JS? - PullRequest
Новая
       6

Как я могу выбрать несколько значений в реагировать JS?

0 голосов
/ 20 октября 2019

Я пытаюсь выбрать несколько значений из выбранных полей, но я могу выбрать только одно поле, и я получаю данные из API, и в конечной точке API я могу выбрать несколько пользователей, например user=1,2,3, и я также хочу выбрать нескольких пользователей в ответ. 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);
    }
  }

Пожалуйста, помогите, я застрял здесь, и я не знаю, как это решить

Ответы [ 2 ]

0 голосов
/ 21 октября 2019

Существует библиотека реагирования-выбора, которую вы можете использовать для достижения желаемой функциональности. Ниже приведена ссылка на официальный сайт npm для этого пакета

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

0 голосов
/ 20 октября 2019

в выбранном вами поле реквизитов изменить 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>
...