可以通过以下步骤实现:
import React, { useState } from 'react';
function MyComponent() {
const [selectedOption, setSelectedOption] = useState('');
// 其他代码...
return (
<div>
<select value={selectedOption} onChange={(e) => setSelectedOption(e.target.value)}>
<option value="">请选择</option>
<option value="option1">选项1</option>
<option value="option2">选项2</option>
</select>
{/* 其他代码... */}
</div>
);
}
import React, { useState } from 'react';
function MyComponent() {
const [selectedOption, setSelectedOption] = useState('');
// 其他代码...
return (
<div>
<select value={selectedOption} onChange={(e) => setSelectedOption(e.target.value)}>
<option value="">请选择</option>
<<option value="option1">选项1</option>
<option value="option2">选项2</option>
</select>
{selectedOption === 'option1' && (
<select>
<option value="">请选择</option>
<option value="suboption1">子选项1</option>
<option value="suboption2">子选项2</option>
</select>
)}
{/* 其他代码... */}
</div>
);
}
在上述代码中,当第一个select的选项值为'option1'时,会显示第二个select,否则隐藏。
import React, { useState } from 'react';
function MyComponent() {
const [selectedOption, setSelectedOption] = useState('');
const [subSelectedOption, setSubSelectedOption] = useState('');
// 其他代码...
return (
<div>
<select value={selectedOption} onChange={(e) => setSelectedOption(e.target.value)}>
<option value="">请选择</option>
<option value="option1">选项1</option>
<option value="option2">选项2</option>
</select>
{selectedOption === 'option1' && (
<select value={subSelectedOption} onChange={(e) => setSubSelectedOption(e.target.value)}>
<option value="">请选择</option>
<option value="suboption1">子选项1</option>
<option value="suboption2">子选项2</option>
</select>
)}
{/* 其他代码... */}
</div>
);
}
在上述代码中,当第一个select的选项值为'option1'时,会显示第二个select,并且第二个select的选项值会根据subSelectedOption状态变量来确定。
这样,根据另一个select中的选项隐藏select标记的功能就实现了。
领取专属 10元无门槛券
手把手带您无忧上云