从下拉列表中选择值后，反应 Material UI 自动完成，防止 OnInputChange

Question

如何防止 React Material UI 在用户从下拉列表中选择一个选项时不触发 onInputChange？使用下拉菜单后，它会再次触发 API，我试图阻止这种情况发生。

    <Autocomplete
      options={patientOptions}
      onChange={(_event, newValue) => {
        onPatientChange(newValue);
      }}
      noOptionsText={
        <Typography>
          <Box color="text.hint">
            {patientLength === 0
              ? 'Type at least 1 character to search'
              : 'No results found.'}
          </Box>
        </Typography>
      }
      onInputChange={async (
        event: object,
        value: string,
        reason: string,
      ) => {
        setPatientLength(value.length);
        if (value.length > 0) {
          await getPatient(value, undefined).then(x => {
            setPatientOptions(x.patients);
          });
        }
      }}
      getOptionLabel={option => getPatientLabel(option)}
      renderInput={params => (
        <TextField
          value={patientValue}
          {...params}
        />
      )}
    />

Answer 1

要防止在用户从下拉列表中选择一个选项时进行 API 调用，您可以参考 onInputChange 的 reason 参数。当用户选择一个选项时，reason 将始终是 reset，而当用户输入自定义文本时，input。在后一种情况下，您还应该检查自定义文本是否包含在 patientOptions.

中

我已将以下条件添加到 onInputChange 中的条件逻辑中：reason === 'input' && !patientOptions.find(value)。

    <Autocomplete
      options={patientOptions}
      onChange={(_event, newValue) => {
        onPatientChange(newValue);
      }}
      noOptionsText={
        <Typography>
          <Box color="text.hint">
            {patientLength === 0
              ? 'Type at least 1 character to search'
              : 'No results found.'}
          </Box>
        </Typography>
      }
      onInputChange={async (
        event: object,
        value: string,
        reason: string,
      ) => {
        setPatientLength(value.length);
        if (value.length > 0 && reason === 'input' && !patientOptions.find(value)) {
          await getPatient(value, undefined).then(x => {
            setPatientOptions(x.patients);
          });
        }
      }}
      getOptionLabel={option => getPatientLabel(option)}
      renderInput={params => (
        <TextField
          value={patientValue}
          {...params}
        />
      )}
    />

从下拉列表中选择值后，反应 Material UI 自动完成，防止 OnInputChange

React Material UI Autocomplete, prevent OnInputChange, after selecting value from dropdown

reactjs

material-ui