Reactjs Select v2 - Как работать с Ajax Typing? - PullRequest
Новая
       4

Reactjs Select v2 - Как работать с Ajax Typing?

0 голосов
/ 25 июня 2018

Я использую реагировать, выберите 2 , но я не знаю, как заставить его работать так, чтобы, когда пользователь что-то вводит в запрос ajax, выполнялся запрос и результаты отправлялись обратно.

Я вижу, что у него есть некоторые параметры асинхронности, но я не понимаю, как он работает и как заставить его работать с axios.

Я придумываю это, но это немного отстает, когдапользователь печатает (вероятно, потому что он перерисовывает его после каждого типа), и когда пользователь выбирает выбор, значение исчезает. 

export default class TestComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {value: ""};
  }

  onInputChange(option) {
    this.getOptionsAsync(option)

}
getOptionsAsync(newInput) {
  var that = this;
  console.log("ffd", newInput)
  axios.get(`https://localhost:44343/api/States/GetStatesByText?text=${newInput}`)
    .then(function (response) {    
      var formatedResults = response.data.map((x)=> {
        return {value: x.id, label: x.name}
      })
      that.setState({
          options: formatedResults,
          value: newInput
      })
    })
    .catch(function (error) {

    });   
}

  render() {
    console.log(this.state.value, "value")
    return (
      <div className="test">
      <Select
        onInputChange={this.onInputChange.bind(this)}
        value={this.state.value}
        options={this.state.options }
      />
      </div>
    );
  }
}

1 Ответ

0 голосов
/ 25 июня 2018

Вы будете делать вызов API каждый раз, когда набираете письмо с текущим способом выполнения действий.Я бы порекомендовал просто загрузить состояния один раз в начале, возможно, в вашем методе ComponentDidMount ().

Если вы передадите реквизит isSearchable React-Select, он все равно автоматически будет работать в качестве фильтра.

Еще одна вещь, которую я должен был сделать в этом случае, которая, я считаю, исправит вашу проблему с изменениями, состоит в том, чтобы убедиться, что он вызывает обработчик изменений, а не только изменений входных данных.

Передайте этот реквизит: 

<Select
    value={this.state.value}
    options={this.state.options }
    onChange={value => {
        if (value) this.onInputChange(value)
        else this.onInputChange('')
      }
  />

Благодаря тому, что this автоматически привязан к функциям стрелок, вам не придется связываться с thi s, если вы измените свой onInputChange на следующее: 

  onInputChange = (value) => {
    this.getOptionsAsync(value)
}

Наконец, вы должны установить состояние в вышеуказанной функции, чтобы сохранить значение. 

  onInputChange = (value) => {
    this.getOptionsAsync(value)
    this.setState({value})
}
...