在React.js的下拉列表中选择"Other"选项时,在表单中添加输入字段的方法如下:
constructor(props) {
super(props);
this.state = {
selectedOption: '',
showInputField: false
};
}
handleSelectChange(event) {
const selectedOption = event.target.value;
if (selectedOption === 'Other') {
this.setState({ selectedOption, showInputField: true });
} else {
this.setState({ selectedOption, showInputField: false });
}
}
render() {
return (
<form>
<select value={this.state.selectedOption} onChange={this.handleSelectChange}>
<option value="Option1">Option 1</option>
<option value="Option2">Option 2</option>
<option value="Other">Other</option>
</select>
{this.state.showInputField && (
<input type="text" placeholder="Please specify" />
)}
<button type="submit">Submit</button>
</form>
);
}
以上代码中,当showInputField为true时,会渲染一个输入字段,否则不会显示。
这样,当选择"Other"选项时,表单中会动态添加一个输入字段,用户可以输入其他选项的具体内容。
领取专属 10元无门槛券
手把手带您无忧上云