React-select

Question

我在 3.1 版本中使用 react-select。感谢这个库，我已经完成了一个 WeekSelector 组件，它允许用户 select 一个特定的星期。

这是我的代码：（经过简化以说明重要部分）

class WeekSelector extends Component {

    onSelectChange = week => {
        const { name, onChange } = this.props;

        if (onChange && week) {
            onChange(name, Number.parseInt(week.value));
        }
        else if(!week){
            onChange(name, moment().week());
        }
    };

    render() {
        const { disabled = false, id, name, value, year } = this.props;

        //Number of weeks in a year 
        const weeks = this.getWeeksDetails(year);

        //Get value
        const formattedValue = weeks.find(week => {

            if(week.value === value){
                return {
                    value: week.value,
                    label: "Week" + week.value + week.details,
                };
            }
        });

        return (
            <Select
                isClearable
                id={id}
                name={name}
                isDisabled={disabled}
                options={weeks.map(week => {
                    return {
                        value: week.value,
                        label: "Week" + week.value + week.details,
                    };
                })}
                value={formattedValue}
                onChange={this.onSelectChange}
            />
        );
    }

问题如下，当我 select 选项中的一个值时，该值被 select 正确编辑。

Week selected

但是当我重新打开 selector 时看到所有选项。 selector 不关注 selected 值。

Opened options with a value selected

感谢 react-select 的文档和一些在线示例，我看到当我删除我的 onSelectChange 函数或 setState 调用时，当我重新打开选项 select 或。

Week properly selected

因此，我正在寻找一种方法来使用我的方法 onSelectChange 并将 select 或选项校准到所选值。

感谢您对本问题的关注。

再见。

Answer 1

添加到select

defaultValue={formattedValue}

React-select - 选项不关注 selected 值

React-select - Options are not focused on the selected value

reactjs