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

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>
    )
  }
}

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

Answer 1

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

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

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>
    )
  }
}

我在您的第二次选择中添加了一个ref 道具，以便我以后可以做 DOM 的事情。当我们执行deselectSelect() 时，我们使用setState() 的回调函数在新状态更新后运行（在这种情况下，选择重置为""）在第二次选择时blur()。这应该会使占位符再次出现。

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

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

Answer 2

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