我使用https://github.com/JedWatson/react-select。
我的组件示例:
selectedOptions :[]
在第一个负载组件中,多重选择为空。当我选择一些值时,我有一些要写入 selectedOptions 的值。在这种情况下,它可以正常工作。
但是当我清除 selectedOptions 视图不会更新时。
有示例 https://codesandbox.io/s/xovn7n2lz4
<Select
defaultValue={selectedOptions}
isMulti={isMulti}
onChange={onChange}
options={options}
placeholder={placeholder}
styles={colourStyles}
theme={(theme) => ({
...theme,
position: 'static',
borderRadius: 0,
colors: {
...theme.colors,
primary25: darkTheme.colors.hoverColor,
primary: darkTheme.colors.hoverColor,
neutral0: normalElemColor,
neutral80: standardFontColor,
},
spacing: {
...theme.spacing,
controlHeight: 24,
baseUnit: 1
}
})}
/>
答案 0 :(得分:4)
您正在使用不受控制的输入。
更改
<Select isMulti
defaultValue={selectedOptions}
onChange={this.onInputChange}
name="color"
options={colourOptions}
/>
收件人
<Select
isMulti
defaultValue={selectedOptions}
value={selectedOptions}
onChange={this.onInputChange}
name="color"
options={colourOptions}
/>
您已定义onchange,但未提供任何值。 我建议您对controlled vs uncontrolled
做出反应