Question

假设我有一个像这样的反应选择组件：

const Select = ({ content, name, label, touched, onSelect, isValid, selected, dataSelector }) => {
    return (
        <select aria-label={name}
                        defaultValue={selected}
                        className={classnames('select select-box col-sm-2 col-xs-12',
                                                                    {'contains-error': touched && !isValid}
                            )}
                        id={name}
                        onChange={onSelect}
                        data-selector={dataSelector}
        >
            <option key="day" value=undefined>{label}</option>
            {content.map(({ value, text }) =>
                <option value={value} key={value}>{text}</option>
             )}
        </select>
    );
};

我正在使用defaultValue设置来自selected道具的项目。但是如果selected未定义，我希望它默认为第一个标签。

我怎样才能做到这一点？

Answer 1

设置条件defaultValue，如

defaultValue={selected ? selected : content[0].value}

Answer 2

使用ternary operator将条件置于defaultValue中，如果在undefined中选择了prop，则指定第一个默认标签的值。

不是将undefined分配给第一个选项，而是分配一些默认值，如1或-1等。

使用此：

<select 
    aria-label={name}
    defaultValue={selected ? selected : '1'}
    className={classnames('select select-box col-sm-2 col-xs-12',                                                                   {'contains-error': touched && !isValid} )}
    id={name}
    onChange={onSelect}
    data-selector={dataSelector}
        >
            <option key="day" value='1'>{label}</option>
            ....
</select>

从反应选择中选择未选择的项目

2 个答案: