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

我想要的是当你从1开始选择你应该取消选择选择2中的任何值时。在我的代码中，我能够取消选择第二个选择的值，但是地点占位符不会返回最初出现时页面已加载。我认为Antd（我在用于样式组件的反应中使用的库）是在第二次选择中将值设置为空字符串而不是取消选择当前值。

Answer 1

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

Answer 2

之前我没有使用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()的回调函数，该函数在更新新状态后运行（在这种情况下，选择重置为{{1} }）我们在第二个选择中执行""。这应该使它不重点，使占位符再次出现。

您的代码中几乎没有问题：

您错误地初始化状态。使用blur()代替select1: ""。

这本身不是问题（因为批处理），但您不需要两次调用select1= ""。只需将其称为一个并将变量设置在那里，而不是一次设置一个变量。

如何取消选择另一个选择选项的选项

2 个答案: