[ { label: 'First', checked: false }, { label: 'Second', checked: true } ]Aquí hay un fragmento muy breve de cómo podrían verse los datos. Estoy usando Autocompletar de Material UI, para que sea posible buscar en las etiquetas. Estas etiquetas tienen una casilla de verificación.
El problema es que no puedo usar onChange en <Checkbox /> cuando es una renderOption Autocompletar simplemente se cierra, sin realizar ninguna acción.
<Autocomplete disableCloseOnSelect={true} options={array} getOptionLabel={option => option.label.toString()} renderInput={params => ( <TextField {...params} fullWidth label="Select label" variant="outlined" error={false} /> )} renderOption={opt => ( <div> <Checkbox checked={opt.checked} onChange={() => alert('not being fired...')} /> <p>{opt.label}</p> </div> )} />No debe usar onChange en Checkbox , debe usar onChange prop de Autocomplete y establecer el valor predeterminado por value prop
y Checkbox recibe sus accesorios de los accesorios de renderOption
const [selectedOptions, setSelectedOptions] = useState([]); useEffect(() => { setSelectedOptions(options.filter(op => op.checked)); }, []); <Autocomplete options={options} value={selectedOptions} onChange={(event, newValue) => { setSelectedUsers(newValue); } renderOption={(props, option, { selected }) => ( <div {...props}> <Checkbox checked={selected} /> <p>{option.name}</p> </div> )} disableCloseOnSelect />El evento onChange funcionará en la casilla de verificación proporcionada en la función renderOption, pero solo funciona cuando hace clic en la casilla de verificación y no en ningún otro lugar del elemento de la lista. Puede usar onClick en el div principal si eso cumple su propósito.