Question

对于初学者来说，我很难使下面的可重现示例正常工作-它非常接近，但是我正努力使react-select小部件显示在下面（即使未定义Select也是当前错误，已经添加了一个react-select脚本标签）。

下面的代码片段的相关部分是在handleButtonChange()函数中注释掉的代码：

class App extends React.Component {
  constructor(props) { 
    super(props);
    
    this.state = {
      mybutton: "A",
      myselect: {value: "GSW", label: "GSW" }
    }
  } 
    
  handleButtonChange = (event) => {
    this.setState({ mybutton: event.target.value });
    
//        if(event.target.value === "A") {
//          this.setState({ myselect: selectOptions[0] })
//        }
//        
//        if(event.target.value === "B") {
//          this.setState({ myselect: selectOptions[0] })
//        }    
  };
  
  handleSelectChange = (myselect) => {
    this.setState({ myselect })
  };
  
  render() {
  
    const { mybutton, myselect } = this.state;
    let selectOptions = [
      { value: "GSW", label: "GSW" },
      { value: "NYK", label: "NYK" },
      { value: "HOU", label: "HOU" },
      { value: "CHI", label: "CHI" },
    ];
    
    selectOptions = selectOptions
      .filter(row => mybutton === "A" ? 
        ["GSW", "HOU"].includes(row.value) :
        ["NYK", "CHI"].includes(row.value))
    
    const selectWidget = 
      <Select
        autoFocus
        onBlurResetsInput={false}
        onSelectResetsInput={false}
        clearable={false}
        disabled={false}
        rtl={false}
        searchable={true}
        value={myselect}
        onChange={this.handleSelectChange}
        options={selectOptions}
      />
    
    return(
      <div>
        <form>
            <div>
              <label>
                  <input
                      type={"radio"}
                      value={"A"}
                      checked={mybutton === "A"}
                      onChange={this.handleButtonChange}
                  />
                  <span>{"A"}</span>
              </label>
            </div>
            <div>
              <label>
                  <input
                      type={"radio"}
                      value={"B"}
                      checked={mybutton === "B"}
                      onChange={this.handleButtonChange}
                  />
                  <span>{"B"}</span>
              </label>
            </div>
        </form>
      
        <div> {selectWidget} </div>
      </div>
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.development.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.development.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react-select/2.0.0/react-select.js"></script>

<div id='root'>
  Come On Work!
</div>

除了寻求帮助以使示例正常工作之外，我的主要问题是如何使以下功能序列起作用：

将按钮从A切换到B
切换按钮可更改selectOption的过滤方式
如果selectOptions中的默认/当前所选选项不再是选项（因为按钮已从A切换到B），请将myselect的状态更新为当前可用选项之一。

对此有任何帮助，我们将不胜感激-如果帖子不清楚，我们很乐意澄清任何事情。

编辑：针对上下文-我的一个更大的应用程序具有按钮，允许用户选择带有单选按钮组的体育联盟的部门（在NBA中，东南，西北，大西洋，太平洋等部门），以及然后从该部门的团队中选择一个小部件。我只是希望这样，当单击/更改按钮分区时，select小部件将显示来自所选分区的团队。

将反应选择小部件与单选按钮组同步

0 个答案: