Question

[不是jQuery]我有两个Selects和一个元素列表，希望基于第一个select的当前值在第二个Select上映射可用的选项

<Select options={sources} defaultValue={sources[0]} onChange={() => {
                // change value of select below
            }}/>

<Select options={mediums} defaultValue={mediums[0]} name="mediumSelect"/>

我不确定在没有jquery的情况下如何执行此操作，当前正在一家根本不使用jquery的公司实习。任何输入表示赞赏

Answer 1

最简单的答案是设置状态并在第二个组件中使用它：

<Select options={sources} defaultValue={sources[0]} onChange={(e) => {
  this.setState({
    value1: e.target.value
  });
}}/>

// modify whatever you need based on `this.state.value1`
<Select options={mediums} defaultValue={mediums[0]} name="mediumSelect"/>

执行此操作的方式有很多，这取决于您是否使用redux等。但这应该可以帮助您入门。您绝对应该对basics of react & forms有所了解。

Answer 2

类似这样的事情... 在这里，侦听源选择组件的更改并更新第二个输入的options数组，别忘了检查元素是否已存在于不存在的数组中

       <Select  
          options={sources}
          value={this.state.selectedSource}
          onChange={evt => {
            this.setState({
              mediums: [...this.state.mediums, evt.target.value],
              selectedSource: evt.target.value
            });
          }}
        />
        <Select
          options={sources}
          value={this.state.selectedMediums}
          onChange={evt => {
            this.setState({
              selectedMediums: evt.target.value
            });
          }}
        />

带有原生HTML元素

    <select
      value={this.state.selectedSource}
      onChange={evt => {
        this.setState({
          mediums: [...this.state.mediums, evt.target.value],
          selectedSource: evt.target.value
        });
      }}
    >
      {this.state.sources.map(value => {
        return (
          <option value={value} key={value}>
            {value}
          </option>
        );
      })}
    </select>
    <select
      value={this.state.selectedMediums}
      onChange={evt => {
        this.setState({
          selectedMediums: evt.target.value
        });
      }}
    >
      {this.state.mediums.map(value => {
        return (
          <option value={value} key={value}>
            {value}
          </option>
        );
      })}
    </select>

Answer 3

您可以将“第一个选择”的值设置为组件状态，然后根据第一个“选择”值将自定义逻辑应用于第二个“选择”值

const sources = ["A", "B"];
const mediumsA = ["C", "D"];
const mediumsB = ["E", "F"];
class Todo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {     
      selectedMedium: ""
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    this.setState({
      selectedMedium: e.target.value
    });
  }

  render() {
    //your logic to your mediums var
    const mediums = this.state.selectedMedium === "B" ? mediumsB : mediumsA;

    return (
      <div>
        <Select
          options={sources}
          defaultValue={sources[0]}
          onChange={this.handleChange}
        />
        <Select options={mediums} defaultValue="" name="mediumSelect" />
      </div>
    );
  }
}



const Select = ({ options, onChange })=> {
    return (
      <select onChange={onChange}>
        {options.map(data => {
          return <option>{data}</option>;
        })}
      </select>
    );
};


ReactDOM.render(<Todo />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 4

看起来您正在使用reactjs。尽管我认为使用任何框架都可以执行以下步骤：

使mediums变量为全局变量
在第一个Select的onChange事件中，为mediums分配了一个值
基于变量mediums呈现第二个Select

如何在另一个<Select>的输入上更改<Select>的可用值

4 个答案: