Question

我有一个自定义组件

const Search = (props) => {
const { type: TYPE, name: NAME, label: LABEL, onSelect, filter, value } = props;
const [data, setData] = useState([]);
const [select, setSelect] = useState(value || -1);

const applyFilter = (data) => {
    let result = data;
    if (filter) {
        result = filter(data);
    }
    return result;
};

useEffect(() => {
    getLookupData(TYPE)
        .then((response) => {
            setData(response);
        })
        .catch((error) => {
            if (error === HttpStatus.NOT_FOUND) {
                setData([]);
            } else {
                throw error;
            }
        });
}, [TYPE]);

useEffect(() => {
    if (value) {
        setSelect(value);
    }
}, [value]);

const options = applyFilter(data).map((item) => (
    <MenuItem value={item.id} key={item.id}>
        {item[NAME]}
    </MenuItem>
));

const handleChange = (event) => {
    setSelect(event.target.value);
    onSelect && onSelect(event);
};

const { classes } = props;
const labelProps = { ...(props.required && { required: props.required }) };
return (
    <FormControl className={classes.formControl} id={NAME} error={props.error}>
        <FormControlLabel control={<InputLabel htmlFor={NAME} {...labelProps}>{LABEL}</InputLabel>} />
        <Select
            name={TYPE}
            value={select}
            onChange={handleChange}
            disabled={props.disabled || options.length === 0}
            input={<Input name={TYPE} id={NAME} />}
        >
            <MenuItem value=''>
                <em>None</em>
            </MenuItem>
            {options}
        </Select>
    </FormControl>
);
};

默认情况下，它接受一个菜单项None，但是我想将此None菜单项作为道具传递，并在需要时调用它，对于某些字段，我希望选择“无”，对于某些字段，我不希望不选择任何选项，当前系统已进行硬编码，以确保每个下拉列表均不显示任何内容，我不希望这种情况发生

<Search 
    required
    type="contractOptionToExtend"
    name="optionToExtend"
    label="Option To Extend"
    id="contractOptionToExtend"
    onSelect={change.bind(null, 'contractOptionToExtend')}
    error={touched.contractOptionToExtend && Boolean(errors.contractOptionToExtend)}
    value={values.contractOptionToExtend}
/>

在上面的字段中我想说是否要使用None选项，我可以通过将其作为道具传递给Search组件来解决此问题，但我不确定如何，我对道具做了类似的事情。如您所见，但目前我无法对菜单项执行相同的操作。

Answer 1

{props.showNone 
    ? <MenuItem value=''>
        <em>None</em>
    </MenuItem> 
    : null
}

然后在所需字段内

showNone={true}

@Abhey Sehgal的信用额

将道具传递到自定义组件中

1 个答案: