未选择任何值时,React-Select Multi Select更新道具

用户名

我正在使用react-select库创建一个多选菜单。当没有选择值时,我希望在div上使用特定的样式宽度,并且当用户开始从选择下拉列表中选择值时,我希望将此宽度设置为null,以便选择组件可以使用其自己的自动调整功能宽度能力。我有以下代码,但是在下一次渲染调用之后更新宽度,因此无法同步更新。不确定如何使其立即以新的宽度更新。我知道setState是异步的,但是如果您在setState函数中使用回调,我会想象它会以新状态呈现。

...
constructor(props) {
    super(props);
    this.state = {
        dropBoxWidth: { width: 130 },
        selectLength: 1
    }
}
.....
handleChange = selectedOption => {
    if (this.state.selectLength > 0) {
        this.setState(
            { selectedOption, selectLength: selectedOption.length, dropBoxWidth: null },
            () => console.log(`Option selected:`, this.state.selectedOption, this.state.selectLength, this.state.dropBoxWidth)
        );
    } else {
        this.setState({ dropBoxWidth: { width: 130 }, selectLength: 1 }), () =>
            console.log("New Dropbox Width ", this.state.dropBoxWidth)
    }

};
render() {
    return (
        <div style={this.state.dropBoxWidth}>
            <Select
                closeMenuOnSelect={false}
                isMulti
                options={aList}
                onChange={this.handleChange}
                placeholder="Item Select"
            />
        </div>
    )
}

再次明确一点,我希望在未选择任何值时将div的样式宽度设置为130。这可以是在页面被打开或刷新时(构造函数的宽度为130),并且如果用户选择值,则决定清除菜单中的所有选择。

扬·瓦克拉维克

您可以在组件样式中使用初始状态。

<Select
  options={options}
  styles={{
    container: (provided, state) => ({
      ...provided,
      width: !state.hasValue && "130px",
      borderBottom: "1px dotted pink"
    })
  }}
/>

就像这里:https : //codesandbox.io/s/amazing-dawn-xwcld?file=/ src/App.js: 290-517

反应选择样式文档:https : //react-select.com/styles

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

传入新道具时重置 react-select 下拉列表

React无法更新道具

通过更新道具更新输入值

子组件未使用新道具更新

在 React onSubmit 中更新道具

React 在 Child 中更新道具

React-接收新道具时子组件不会更新

通过新道具时,反应子组件状态不会更新

使用React更新道具更改的C3图表

React Native - Redux ~ 没有被调用时更新道具

从父组件更新道具时未调用React构造函数

未选择时,React-Select输入内容消失

react / redux:立即通过调度更新道具后从状态获取最新的道具值

(React-Select 钩子)如何使用 Select 的 onChange 渲染道具更新状态?

如何在加载时从数据库中预选择“ sw-entity-multi-select”组件值

Angular Material 7 Multi Select-设置所选值

Kendo ui Multi Select使用值删除选定的元素

带有多个值的jQuery Multi-Select

在 react-leaflet 3 中使用 createControlComponent 时更新道具

如何在reactjs的react-multi-select-component中设置动态选择项

当multi.js库修改了<select>时,AJAX请求没有刷新<select>

django 模板 <select> 框未选择值

如何在react-boostrap multi select上设置选定的值?

未捕获的TypeError:无法读取null的属性“当前”-选择任何选项时均选择Select2.js

将值设置为 <li> 标记并更新道具 on:click $event vue.js

react-redux connect不会重新渲染组件,但是会更新道具

使用 react 更新 <select>

动态更新道具

React - 当 <option> 更新时更新 <select>