时间戳

首页 > 解决方案 > Material-UI Autocomplete onChange 不更新值

reactjs - Material-UI Autocomplete onChange 不更新值

问题描述

我想onChange在自动完成组件上使用事件来获取当前选定的值。问题是它没有按预期工作，所以当我单击检查/取消选中值复选框仍然未选中但在控制台中我可以看到添加了新值

取消注释这部分以使其工作：

  value={myTempVal}
      onChange={(event, newValue) => {
        setMyTempVal(newValue);
        console.log(newValue);
      }}

在线演示： https ://codesandbox.io/embed/hardcore-snowflake-7chnc?fontsize=14&hidenavigation=1&theme=dark

代码：

const [myTempVal, setMyTempVal] = React.useState([]);

<Autocomplete
      open
      multiple
      value={myTempVal}
      onChange={(event, newValue) => {
        setMyTempVal(newValue);
        console.log(newValue);
      }}
      disableCloseOnSelect
      disablePortal
      renderTags={() => null}
      noOptionsText="No labels"
      renderOption={(option, { selected }) => {
        return (
          <>
            <Checkbox
              icon={icon}
              checkedIcon={checkedIcon}
              style={{ marginRight: 8 }}
              checked={selected}
            />
            {option.title}
          </>
        );
      }}
      options={option2}
      // groupBy={option => option.groupName}
      getOptionLabel={option => option.title}
      renderInput={params => (
        <div>
          <div>
            <SearchIcon />
          </div>
          <TextField
            variant="outlined"
            fullWidth
            ref={params.InputProps.ref}
            inputProps={params.inputProps}
          />
        </div>
      )}
    />

标签： reactjsmaterial-ui

解决方案

您需要从函数中获取donors receivers和options变量。这些变量在每次渲染时都会重新创建，这意味着它们的引用在每次渲染时都会发生变化，并且当自动完成进行引用相等检查以确定是否选择了一个选项时，他永远不会找到选择的选项。

const donors = [...new Set(data.map(row => row.donor))].map(row => {
  return {
    groupName: "Donors",
    type: "donor",
    title: row || "null"
  };
});
const receivers = [...new Set(data.map(row => row.receiver))].map(row => {
  return {
    groupName: "Receivers",
    type: "receiver",
    title: row || "null"
  };
});
const option2 = [...donors, ...receivers];

export const App = props => {

  const [myTempVal, setMyTempVal] = React.useState([]);

  return (
    <Autocomplete
      open
      multiple
...

您还可以添加getOptionSelected以覆盖参考检查：

<Autocomplete
      open
      multiple
      disableCloseOnSelect
      disablePortal
      renderTags={() => null}
      noOptionsText="No labels"
      getOptionSelected={(option, value) => option.title === value.title} 
      renderOption={(option, { selected }) => {
        return (
          <>
            <Checkbox
              icon={icon}
              checkedIcon={checkedIcon}
              style={{ marginRight: 8 }}
              checked={selected}
            />
            {option.title}
          </>
        );
      }}
      options={option2}
      // groupBy={option => option.groupName}
      getOptionLabel={option => option.title}
      renderInput={params => (
        <div>
          <div>
            <SearchIcon />
          </div>
          <TextField
            variant="outlined"
            fullWidth
            ref={params.InputProps.ref}
            inputProps={params.inputProps}
          />
        </div>
      )}
    />

推荐阅读