清除多选(反应选择)

时间:2018-12-07 09:12:50

标签: reactjs react-select

我使用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
                }
            })}
        />

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

做出反应

demo