Reactjs Select v2 - 如何处理 Ajax 打字？

Question

我正在使用 reactjs select 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>
    );
  }
}

Answer 1

您每次使用当前的操作方式键入字母时，都会进行一次 api 调用。我建议在开始时只加载一次状态，也许在您的 ComponentDidMount() 方法中。

如果你将 isSearchable prop 传递给 React-Select 它会自动作为过滤器工作。

在这种情况下，我必须做的另一件事是确保它在更改时调用处理程序，而不仅仅是在输入更改时调用处理程序，我相信这将解决您的更改问题。

传递这个道具：

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

由于 this 自动绑定到箭头函数的方式，如果您将 onInputChange 更改为以下内容，则不必绑定到 this：

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

最后，您应该在上述函数中设置状态以便存储值。

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

Reactjs Select v2 - 如何处理 Ajax 打字？

Reactjs Select v2 - How to handle Ajax Typing?

reactjs

react-select

axios