Options React 中的可选字段 Select

Question

大家好，我正在尝试与 redux-form 合作创建一个自动建议。我正在使用 Creatable 方法。我通过外部 API 加载我的选项。问题是，我需要在每个选项对象中有一个额外的字段。 {value: "test@gmx.de", label: "test@gmx.de", dn:"CN...." }。有没有可能这样做？

Answer 1

我通常在 API 请求的回调中添加我自己的属性，就在设置状态选项之前。例如...

    axios.get('/some/api/request')
    .then(response => {

        const options = response.data.map(item => {
            // Add whatever custom properties you want here
            return ({value: "test@gmx.de", label: "test@gmx.de", dn:"CN...." })
    }) 

    // set your options in the state to the new options constant from above
    dispatch(change('formName', 'options', options))

希望对您有所帮助！

Answer 2

//Handle change with either selectedOption
  handleChange(selectedOption){
    this.setState({ selectedOption })
    if(this.props.onOptionSelect){
      this.props.onOptionSelect(selectedOption.data)
    }
  }

  loadOptions(input, callback) {
    this.props.loadOptions(input).then(options => {
      callback(null, {options: options})
    })
  }

  render() {
    const {selectedOption} = this.state
    const selectClass = this.props.meta.touched && this.props.meta.error ? "has-error form-group" : "form-group"
    return (
      <div className={selectClass}>
        <AsyncCreatable
          value={selectedOption}
          onChange={this.handleChange}
          loadOptions={this.loadOptions}
          isLoading={false}
          placeholder={this.props.label}
          promptTextCreator={(label) => this.props.promtLabel(label)}
          onBlur={() => this.props.input.onBlur(selectedOption.value || "")}
        />
      </div>
    )
  }


//Function to convert incomming users in usable options (React Select)
export const convertADUsersToOptions = users => {
  return users.map(user => {
    return {
      value: normalizeDN(user.dn),
      label: user.mail
    }
  })
}

Options React 中的可选字段 Select

Optional field inside Options React Select

reactjs

react-select

redux-form