如何在react-select中添加默认值？

Question

我有一个React组件，我想在这个组件中加入预定义的值。我该怎么做？我的React选择框组件如下：

import React from 'react';
import createClass from 'create-react-class';
import PropTypes from 'prop-types';
import Select from 'react-select';

var CreatableDemo = createClass({
displayName: 'CreatableDemo',
propTypes: {
    hint: PropTypes.string,
    label: PropTypes.string
},
getInitialState () {
    return {
        multi: true,
        multiValue: [],
        options: [],
        skills_data: [],
        value: undefined
    };
},
handleOnChange (value) {
    const { multi } = this.state;
    if (multi) {
        this.setState({ multiValue: value });

    } else {
        this.setState({ value });
    }
    let skills_arr = [];
    if(value != []){
        for(let i = 0; i < value.length; i++){
            skills_arr.push(value[i].value);
        }
        this.props.handleSkillsChange(skills_arr);
        this.setState({ skills_data: skills_arr });
    }
    else{ 
        this.setState({ skills_data: [] });
        this.props.handleSkillsChange(this.state.skills_data);
    }
},
render () {
    const { multi, multiValue, value, options } = this.state;
    return (
        <div className="section">
            <div className="validate-input m-b-26 div-space form-div" data-validate="Skills are required">
                <span className="label-input100">Skills</span>
                <Select.Creatable   multi={multi} options={options} onChange={this.handleOnChange} value={multi ? multiValue : value}/>
                <div className="hint">{this.props.hint}</div>

            </div>
        </div>
    );
}
});

export default CreatableDemo;

我尝试查看其他答案，但它不能解决我的问题。我已将默认值添加到数组中作为multiValue。它没有解决这个问题。

- Murtaza Manasawala

---

可能是如何在react-select中设置默认值的重复问题。 - Agney

你找到解决方案了吗？ - Vishal

Answer 1

您没有放置组件的完整代码，我不知道multi和multiValue的值！

但似乎问题出在了value属性上 value= {multi? multiValue：value}。 您检查了multi的存在并传递了multiValue，但是multiValue可能未定义！

您的代码应该像这样：

<Select.Creatable
    ...
    value={multiValue ? multiValue : value}
/>

- Soroush Chehresa

---

我试过了！对我来说似乎不起作用！我已经将值作为数组发送到multi和multiValue中。这并没有解决问题。 - Murtaza Manasawala

@MurtazaManasawala 请将组件的完整代码放在在线编辑器（如https://jsfiddle.net）上，然后在此处发送链接。 - Soroush Chehresa