[不是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的公司实习。任何输入表示赞赏
答案 0 :(得分:3)
最简单的答案是设置状态并在第二个组件中使用它:
<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有所了解。
答案 1 :(得分:3)
类似这样的事情... 在这里,侦听源选择组件的更改并更新第二个输入的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>
答案 2 :(得分:1)
您可以将“第一个选择”的值设置为组件状态,然后根据第一个“选择”值将自定义逻辑应用于第二个“选择”值
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>
答案 3 :(得分:0)
看起来您正在使用reactjs。 尽管我认为使用任何框架都可以执行以下步骤:
mediums
变量为全局变量mediums
分配了一个值mediums
呈现第二个Select