【问题标题】:How to add a default value in react-select?如何在 react-select 中添加默认值?
【发布时间】:2018-09-17 17:25:19
【问题描述】:

我有一个反应组件,我想在这个组件中添加预定义的值。我怎么做?我的反应选择框组件看起来像:

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 。解决不了问题

【问题讨论】:

标签: reactjs


【解决方案1】:

您没有放置组件的完整代码,我不知道 multimultiValue 值!

但它在价值道具value={multi ? multiValue : value} 处接缝问题。 你检查存在multi 并通过multiValuemultiValue 可以是未定义的!

你的代码应该是这样的:

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

【讨论】:

  • 我试过了!它似乎对我不起作用!我将值作为 multi 和 multiValue 中的数组发送。它不能解决问题。
  • @MurtazaManasawala 请将组件的完整代码放在在线编辑器上,例如jsfiddle.net,然后在此处发送链接
猜你喜欢
  • 1970-01-01
  • 2017-09-15
  • 1970-01-01
  • 2022-08-10
  • 1970-01-01
  • 2020-07-26
  • 2021-02-12
  • 2020-07-22
  • 1970-01-01
相关资源
最近更新 更多