如何在反应中取消 select 另一个 select 选项的 select 选项

Question

我有这样一个 Antd React 组件：

class MyApp extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      select1="",
      select2="",
    }
  }
  deselectSelect(e){
    this.setState({ select1: e.target.value });
    this.setState({ select2: "" }); 
  }
  render() {
    return(
      <div>
        <Select
          placeholder="select first val"
          onChange={this.deselectSelect}
          value={this.state.select1} />
        <Select
          placeholder="select 2nd val"
          value={this.state.select2} />
      </div>
    )
  }
}

我想要的是当你从第一个选项中选择时，你应该 deselect select 2 中存在的任何值。在我的代码中，我能够取消select 第二个select 的值，但占位符没有返回，该占位符最初在页面加载时存在。我认为 Antd（我在 React 中用于样式化组件的库）在第二个 select 中将值设置为空字符串，而不是 deselecting 当前值。

Answer 1

我以前没有用过 antd API，但我认为这应该可以：

您可能需要模糊 select 以便显示占位符。这是我会尝试的：

class MyApp extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      select1: "",
      select2: "",
    }
  }
  deselectSelect(e){
    this.setState({
      select1: e.target.value,
      select2: ""
    ), () => {
      this.sel2Ref.blur();  //runs **after** the above setState has finished
    }};
  }
  render() {
    return(
      <div>
        <Select
          placeholder="select first val"
          onChange={this.deselectSelect}
          value={this.state.select1} />
        <Select
          ref={(el) => this.sel2Ref = el}  //add a reference for DOM stuff later
          placeholder="select 2nd val"
          value={this.state.select2} />
      </div>
    )
  }
}

我为你的第二个 select 添加了一个 ref 道具，这样我以后就可以做 DOM 的事情了。当我们执行 deselectSelect() 时，我们使用 setState() 的回调函数，该函数在 之后运行 新状态已更新（在本例中， select s 重置为 "")，其中我们在第二个 select 上执行 blur()。这应该会使其失去焦点，使占位符再次出现。

您的代码中存在一些问题：

您错误地初始化了状态。使用 select1: "" 而不是 select1= "".
这本身不是问题（因为批处理），但您不需要调用 setState() 两次。只需将其称为一个并在那里设置您的两个变量，而不是一次设置一个。

Answer 2

在 deselectSelect 上将 select2: "" 更改为 select2: undefined。

如何在反应中取消 select 另一个 select 选项的 select 选项

How to deselect option on selecting option of another select in react

html

ecmascript-6

reactjs

antd