Question

react-select中的Select组件维护label和value值的状态。到目前为止，我已经看到将此组件集成到redux-form表单中的建议，建议覆盖默认的react-select onChange和onBlur行为，其中一个行为是从父redux-form组件隐式传递下来的。例如......

<Field component{SelectWrapper} />

class SelectWrapper extends React.Component {
    onChange = event => {
       if (this.props.input.onChange && event != null) {
          this.props.input.onChange(event.value);
       } else {
          this.props.input.onChange(null);
       }
    }
    render() {
         <AsyncCreatableSelect 
           {...this.props}
           onChange={this.onChange}
           onBlur={() => this.props.input.onBlur(this.props.input.value)}
         />
    }
}

我想使用文档的<Select />作为_id和value属性作为{{来填充MongoDB商店中的name组件1}}。然后，当选择其他选项时，我希望在选择框中看到label，同时保持name作为值。这样，用户可以从有意义的项目中进行选择，同时我可以在提交表单并将其推回数据存储时获得一些保证。有没有一个好的或正确的方法来做到这一点？

我的代码到目前为止......

id

Answer 1

您的onchange功能必须如

onChange = (event) => {
    if (this.props.input.onChange && event.target.value != null) {
      this.props.input.onChange(target.value);
    } else {
      this.props.input.onChange(null);
    }
  };

或者如果您正在使用字段中的redux

onChange = (event, value) => {
        if (this.props.input.onChange && value != null) {
          this.props.input.onChange(value);
        } else {
          this.props.input.onChange(null);
        }
      };

在redux-form状态中保持react-select组件的值和标签

1 个答案: