React-select multi select 在没有值 selected 时更新道具

Question

我正在使用 react-select 库来创建多 selection 菜单。当没有值 selected 时，我希望在 div 上使用特定的样式宽度，并且当用户从 select 下拉列表中开始 selecting 值时，我想要此宽度设置为空，以便 select 组件可以使用它自己的自动调整宽度功能。我有以下代码，但我无法同步更新宽度，因为它会在下一次渲染调用后更新。不确定如何使其立即更新为新宽度。我知道 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 的样式宽度在没有值 selected 时设置为 130。这可能是在页面打开或刷新时（构造函数属性的宽度为 130），如果用户 select 的值然后决定从菜单中清除所有 select 离子。

Answer 1

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

<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

React select 样式文档：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，因此您可以直接从那里检查长度（即，您可以 [=18= 而不是 this.state.selectLength > 0 ]).

但是，既然您提到您对样式和长度感兴趣，因为您想要为父项设置样式 div，您实际上并不需要存储样式或长度 - 您可以存储所选选项并在 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>
    );
  }
}

React-select multi select 在没有值 selected 时更新道具

React-select multi select update a prop when no value is selected

javascript

reactjs

react-select