在Antd中,通过使用非执行代码可以改变
import { Select } from 'antd';
const { Option } = Select;
const App = () => {
const options = [
{ value: '1', label: 'Option 1' },
{ value: '2', label: 'Option 2' },
{ value: '3', label: 'Option 3' },
];
const handleChange = (value) => {
console.log(`Selected value: ${value}`);
};
return (
);
};
export default App;
在上面的示例中,我们使用了和
组件来创建一个选择框。
组件中的非执行代码
{!option.value && (disabled)}
通过判断option.value
的值是否为假(比如为空、null、undefined等),来决定是否渲染一个红色的“(disabled)”文本。这样可以根据条件来动态改变
当用户选择一个选项时,handleChange
函数会被调用,并打印出被选中的值。
请注意,此示例假设options
是一个包含选项对象的数组,每个对象都有value
和label
属性。你可以根据自己的需求修改和扩展这个示例。