Question

我将redux表单上的material-ui select用作组件。

有效方法：

我正在发送选择和渲染中的对象列表，它正在工作。
从菜单列表中选择一项时，其显示为选中状态，并且其工作和保存都在工作。
当我要编辑此下拉列表时，通常我是从服务器加载数据，并且下拉列表将数据作为对象获取，并且将其呈现为选定的数据也可以正常工作，

什么不起作用：

但是问题是当我打开列表进行更改或非常不幸地检查列表时，列表项未显示为选定项

export const renderSelectField = ({
  options,
  input,
  name,
  label,
  fieldName,
  meta: { touched, error, invalid }
}) => {
  const handleChange = event => {
    return event.target.value;
  };

  const renderValue = (fieldName, event) => {
      return event.name;
  };
  const id = `outlined-${name}-simple`;
  const inputLabel = null;
  return (
    <FormControl
      variant="outlined"
      fullWidth
      error={touched && invalid}
      component="div"
    >
      <InputLabel ref={inputLabel} htmlFor={label}>
        {label}
      </InputLabel>
      <Select
        value={input.value}// a object 
        autoWidth={true}
        renderValue={renderValue.bind(this, fieldName)}
        onChange={event => input.onChange(handleChange(event))}
        input={<OutlinedInput id={id} name={name} labelWidth={100} />}
      >
        {options != null && options.length > 0
          ? options.map((option, index) => {
              return (
                <MenuItem
                  key={index}
                  value={option}
                  component="div"
                  button={true}>
                  {option.name}
                </MenuItem>
              );
            })
          : null}
      </Select>
      {renderFromHelper({ touched, error, invalid })}
    </FormControl>
  );
};

如何在material-ui选择中选择菜单项

0 个答案: