Question

我正在使用材料ui自动完成组件，但我注意到当直接从芯片上的（x）按钮删除芯片（标签）时，不会触发自动完成的onchange功能。有什么主意，当直接从芯片组件中删除标签时，如何让onchange触发？

以下是我的代码：

我使用自动完成功能的组件

export default function FormSearchInput( props ) {
  const classes = FormStyle();
  const icon = <CheckBoxOutlineBlankIcon fontSize="small" />;
  const checkedIcon = <CheckBoxIcon fontSize="small" />;
  return (
    <Grid item xs = {props.xs} className = {classes.formItem}>
    <Autocomplete
      className = {props.className}
      size = {props.size}
      limitTags = {4}
      multiple
      options = {props.options}
      disableCloseOnSelect
      getOptionLabel = {( option ) => option}
      defaultValue = {props.selectedOptions}
      renderOption = {( option, {selected} ) => (
      <React.Fragment>
      <Checkbox
        icon = {icon}
        checkedIcon = {checkedIcon}
        style = {{ marginRight: 8 }}
        checked = {selected}
        onChange = {props.onChange( option, selected )}
      />
        {option}
      </React.Fragment>
    )}
    renderInput = {( params ) => (
      <TextField {...params} variant = "outlined" label = {props.label}/>
    )}
    />
  </Grid>
  )
}

我传递给formsearchcomponent的onchange处理程序：

function handleCollaboratorsChange( option, selected ) {
    console.log("triggering")
    let tempCollaborators = collaborators
    if( selected && !tempCollaborators.includes(option) ) {
      // If collaborator not in list add to list
      tempCollaborators.push( option )
    } else if( !selected && tempCollaborators.includes(option) ) {
      // If collaborator in list remove from list
      tempCollaborators.splice( tempCollaborators.indexOf(option), 1 );
    }
    setCollaborators( tempCollaborators )
  }

Answer 1

添加 onChange 属性...

 <Autocomplete
      className = {props.className}
      size = {props.size}
      limitTags = {4}
      multiple
      options = {props.options}
      disableCloseOnSelect
      getOptionLabel = {( option ) => option}
      defaultValue = {props.selectedOptions}
      **onChange = {(event, newValue) => { handleCollaboratorsChange(newValue); }}**
      renderOption = {( option, {selected} ) => (

MUI自动完成onchange不会触发片上删除

1 个答案: