MUI 自动完成 onchange 未在芯片删除时触发

Question

我正在使用材料 ui 自动完成组件，但我注意到当芯片（标签）直接从芯片上的 (x) 按钮删除时，不会触发自动完成的 onchange function。 有什么想法可以在直接从芯片组件中删除标签时触发 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>
  )
}

我传递给我的表单搜索组件的 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} ) => (

Answer 2

捕捉 onchange 中的“原因”。 在以下示例中，我有一个自动完成功能，允许用户添加新选项并将它们显示为筹码。

  // HANDLE: ON CHANGE
  const on_change = (
    event: React.SyntheticEvent,
    newValue: any,
    reason: string,
    details: any,
  ) => {
    const selected_item = newValue[newValue.length - 1]

    switch (reason) {
      case 'removeOption':
      case 'remove-option':
        if (details.option.name) {
          // remove an existing option
          remove_tag(details.option.name)
        } else {
          // remove a new created option 
          remove_tag(details.option.inputValue)
        }

        break
      case 'createOption':
      case 'selectOption':
        if (typeof selected_item === 'string') {
          if (can_add()) create_tag(newValue)
        } else if (selected_item && selected_item.inputValue) {
          // Create a new value from the user input
          if (can_add()) create_tag(selected_item.inputValue)
        } else {
          if (can_add()) {
            if (!tags.includes(selected_item)) set_tag([...tags, selected_item])
          }
        }
        break
    }
  }

并像这样定义组件：

<Autocomplete
            multiple={true}
            autoHighlight={true}
            limitTags={tags_limit}
            id="cmb_tags"
            options={full_tags}
            getOptionLabel={on_get_option_label}
            defaultValue={tags}
            freeSolo
            filterOptions={on_filter}
            selectOnFocus
            noOptionsText={i18n.t('sinopciones')}
            onChange={on_change}
            renderInput={(params) => (
              <TextField
                {...params}
                variant="standard"
                placeholder={placeholder}
              />
            )}
            renderOption={(props, option, { selected }) => (
              <li {...props}>
                <Checkbox
                  icon={icon}
                  checkedIcon={checkedIcon}
                  style={{ marginRight: 8 }}
                  checked={selected}
                />
                {option.name}
              </li>
            )}
          />

让我知道这是否对您有帮助。