我正在使用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] 删除。
我来说两句