TA貢獻(xiàn)1828條經(jīng)驗(yàn) 獲得超4個(gè)贊
我認(rèn)為你應(yīng)該使用值而不是 ID。但如果你非常需要所選選項(xiàng)的 ID 那么你可以嘗試這個(gè)-
?handleChange = (event) => {
? ? ? const index = event.target.selectedIndex;
? ? ? const optionElement = event.target.childNodes[index];
? ? ? const optionElementId = optionElement.getAttribute('id');
? ? ? console.log(optionElementId);
? }
選擇列表是-
<select onChange={this.handleChange}>
? ? <option id="1">Travel</option>
? ? <option id="2">Autoloan</option>
</select>
TA貢獻(xiàn)1891條經(jīng)驗(yàn) 獲得超3個(gè)贊
HTMLSelectElement元素有selectedIndex屬性。使用它和孩子列表，您可以獲得孩子的屬性：
<select id="category" onChange={this.selectChanged}>
? ? <option id="1">Travel</option>
? ? <option id="2">Auto Loan</option>
</select>
selectChanged(event){
? ? const select = event.target;
? ? const id = select.children[select.selectedIndex].id;
? ? //now you can store the id's value to state or somewhere else
}
如果您需要進(jìn)入id表單提交處理程序，您必須通過 id 查找select，然后執(zhí)行相同的操作：
onSubmit(event) {
? ? const form = event.target;
? ? const select = form.elements.namedItem('category');
? ? const id = select.children[select.selectedIndex].id;
}
TA貢獻(xiàn)1810條經(jīng)驗(yàn) 獲得超4個(gè)贊
您可以使用來完成此操作value，例如創(chuàng)建此狀態(tài)和函數(shù)
const [category, setCategory] = useState("1");
const handleChange = (e) => { setCategory(e.target.value) }
那么你可以這樣做
<select value={category} onChange={this.handleChange}>
<option value="1">Travel</option>
<option value="2">Autoloan</option>
</select>
TA貢獻(xiàn)1812條經(jīng)驗(yàn) 獲得超5個(gè)贊
根據(jù)reactjs.org https://reactjs.org/docs/forms.html#the-select-tag， 該<select>元素在react中與HTML略有不同。在 HTML 中，<select>創(chuàng)建一個(gè)下拉列表。例如，此 HTML 創(chuàng)建一個(gè)口味下拉列表：
<select>
<option value="grapefruit">Grapefruit</option>
<option value="lime">Lime</option>
<option selected value="coconut">Coconut</option>
<option value="mango">Mango</option>
</select>
請注意，由于選定的屬性，椰子選項(xiàng)最初被選中。React 不使用這個(gè)選定的屬性，而是使用根標(biāo)簽上的value屬性。這在受控組件中更方便，因?yàn)槟恍柙谝惶幐滤＠纾簊elect
class FlavorForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: 'coconut'};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
alert('Your favorite flavor is: ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Pick your favorite flavor:
<select value={this.state.value} onChange={this.handleChange}>
<option value="grapefruit">Grapefruit</option>
<option value="lime">Lime</option>
<option value="coconut">Coconut</option>
<option value="mango">Mango</option>
</select>
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
舉報(bào)