React-select

Question

这个问题已经被问过很多次了，很抱歉，我无法解决这个问题。我已经阅读了文档，但我找不到任何有用的东西，所以我显然不明白这里发生了什么。

class DivisionExtraDetails extends Component {
constructor(props) {
    super(props);

    this.state = {
        error: false,
        loading: true,
        removing: null,
        saving: false,
        geofence: false,
        startTimeOfDay: ''
    };
}

componentDidMount() {
    const { division } = this.props;

    Axios.get(`${API_URL}assetgroups/${division.id}`)
        .then(r => {
            this.setState({
                loading: false,
                geofence: r.data.geofence_assign,
                startTimeOfDay: r.data.day_start
            });
        })
        .catch(err => {
            if (!Axios.isCancel(err)) {
                this.setState({
                    error: true
                });
            }
    });
}


render() {
    const { error, loading, geofence, saving, startTimeOfDay } = this.state;
    const { assignText, division } = this.props;

    const geoFenceOptions = [
        {value: 1, label: 'YES'},
        {value: 0, label: 'NO'},
        {value: null, label: 'Not yet set'},
    ];

    return (
        <React.Fragment>
            <div className="col-5">
             <span>Assign a GeoFence (Yes/No)</span>
               <Select
                 selectedValue={geofence}
                 options={geoFenceOptions}
                 className="basic-multi-select"
                 classNamePrefix="select"
                 onChange={this.handleChange}
               />
            </div>                       
        </React.Fragment>
    );
}

}

我也试过：

defaultValue={geofence}
selectedValue={geofence}
value={geofence}

我也试过变量为：

{this.state.geofence}

如果我在开发工具中查看它，我可以看到对数据库的调用正在正确填充状态。但我无法解决。如果有人可以帮助完成这个看似简单的任务，那就太好了。谢谢

Answer 1

constructor(props) {
  super(props);

  this.state = {
    // ... code omitted
    geofence: /* set default value here */
  };
}

Answer 2

您在反应 select 中将 value 作为布尔值或字符串传递，但您将对象作为其选项传递，因此这就是反应 select 无法找到显示默认值的原因。

要解决此问题，您需要在 value 道具中传递正确的对象，因此请尝试以下操作：-


class DivisionExtraDetails extends Component {
constructor(props) {
    super(props);

    this.state = {
        error: false,
        loading: true,
        removing: null,
        saving: false,
        geofence: false,
        startTimeOfDay: '',
       
       // set geoFenceOptions as state so we can use it later
       geoFenceOptions: [
        {value: true, label: 'YES'},
        {value: false, label: 'NO'},
        {value: null, label: 'Not yet set'},
       ];
    };
}


// find correct geoFenseOption based on provided value
getGeoFenceValue = (value) => {
  return this.state.geoFenceOptions.find(option => option.value === value);
}

componentDidMount() {
    const { division } = this.props;

    Axios.get(`${API_URL}assetgroups/${division.id}`)
        .then(r => {
            this.setState({
                loading: false,
                geofence: this.getGeoFenceValue(r.data.geofence_assign),  // call function to find correct option
                startTimeOfDay: r.data.day_start
            });
        })
        .catch(err => {
            if (!Axios.isCancel(err)) {
                this.setState({
                    error: true
                });
            }
    });
}


render() {
    const { error, loading, geofence, saving, startTimeOfDay, geoFenceOptions } = this.state;
    const { assignText, division } = this.props;

    return (
        <React.Fragment>
            <div className="col-5">
             <span>Assign a GeoFence (Yes/No)</span>
               <Select
                 selectedValue={geofence}
                 options={geoFenceOptions}
                 className="basic-multi-select"
                 classNamePrefix="select"
                 onChange={this.handleChange}
               />
            </div>                       
        </React.Fragment>
    );
}

React-select - 我不知道如何设置默认值

React-select - I can not work out how to set a default value

javascript

reactjs