React-select multi select 在没有选择值时更新一个道具

Question

我正在使用 react-select 库来创建多选菜单。 当没有选择值时，我希望在 div 上使用某种样式宽度，并且当用户开始从 select 下拉列表中选择值时，我希望将此宽度设置为 null 以便 Z99938282F040718592Z 可以使用它的自动调整组件宽度能力。 我有下面的代码，但我无法获得同步更新的宽度，因为它在下一次渲染调用后更新。 不知道如何让它立即更新为新的宽度。 我知道 setState 是异步的，但如果你在 setState function 中使用回调，我想它会用新的 state 呈现。

...
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。 这可能是在页面打开或刷新时（构造函数 props 的宽度为 130），如果用户选择值然后决定从菜单中清除所有选择。

Answer 1

您可以在组件的 styles 中使用初始 state。

<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

反应 select styles 文档： https://react-select.com/styles

Answer 2

您的console.log没有打印出您期望的保管箱宽度的原因是它实际上并没有作为回调传递。

如果稍微格式化setState调用，您会注意到逗号实际上位于右括号之后：

this.setState({
    dropBoxWidth: { width: 130 },
    selectLength: 1
}),
() => console.log("New Dropbox Width ", this.state.dropBoxWidth);

但是代码的问题是您在进行this.state.selectLength比较时使用的是陈旧数据。 您对以前的价值并不真正感兴趣，而是对当前的价值感兴趣。 react-select传递给您的selectedOption参数是数组或 null，因此您可以直接从那里检查长度（即代替this.state.selectLength > 0 ，您可以执行selectedOption && selectedOption.length > 0 ） .

但是，由于您提到您对样式和长度感兴趣，因为您想要设置父 div 的样式，您实际上并不需要存储样式或长度 - 您可以只存储选定的选项并派生 state render() ：

const selectedStyle = { width: 130 }

class Selector extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedOption: null,
    };
  }

  handleChange = (selectedOption) => {
    // null or object array
    this.setState({ selectedOption });
  };

  render() {
    const { selectedOption } = this.state;
    const anythingSelected = selectedOption && selectedOption.length > 0;

    return (
      <div style={!anythingSelected ? selectedStyle : null}>
        <Select
          closeMenuOnSelect={false}
          isMulti
          options={aList}
          onChange={this.handleChange}
          placeholder="Item Select"
        />
      </div>
    );
  }
}