React js 多选 [object 对象], [object 对象]

Question

我正在使用 Material UI 进行多重选择。这是我的代码。

\n

  <TextField\n        classes={{ root: classes.root }}\n        select\n        name="states"\n        id="states"\n        fullWidth\n        label="states where you want to work" \n        SelectProps={{\n          multiple: true,\n          value: states.states,\n          onChange: handleFieldChange\n        }}\n      >\n        {listStates.map(col => (\n              <MenuItem selected classes={{ selected: classes.selected }} key={col} value={col}>\n                  <Checkbox checked={states.states.indexOf(col) > -1} />\n                  <ListItemText primary={col} />\n              </MenuItem>\n            ))} \n      </TextField>\n

\n

这是handleFieldChange函数：

\n

  const handleFieldChange = event => {\n      event.persist();\n      setStates(states => ({\n        ...states,\n        [event.target.name]:\n          event.target.type === "checkbox"\n            ? event.target.checked\n            : event.target.value\n      }));\n    };\n

\n

这是状态数组：

\n

  <TextField\n        classes={{ root: classes.root }}\n        select\n        name="states"\n        id="states"\n        fullWidth\n        label="states where you want to work" \n        SelectProps={{\n          multiple: true,\n          value: states.states,\n          onChange: handleFieldChange\n        }}\n      >\n        {listStates.map(col => (\n              <MenuItem selected classes={{ selected: classes.selected }} key={col} value={col}>\n                  <Checkbox checked={states.states.indexOf(col) > -1} />\n                  <ListItemText primary={col} />\n              </MenuItem>\n            ))} \n      </TextField>\n

\n

一切正常，值正确保存在 useState 中，但在屏幕中我看不到我选择的值，我只看到 [object Object]、[object Object]。

\n

你知道为什么会发生\xc2\xb4s吗？

\n

问候

\n

Answer 1

问题似乎是缺少道具renderValue。value 是所选值的列表，但 renderValue 函数给出实际的渲染逻辑。通过这个额外的道具，它应该可以正常工作。

根据官方文档：
renderValue 是function(value: any) => ReactNodevalue - 提供给组件的值。

示例代码：

SelectProps={{
  multiple: true,
  value: states.states,
  onChange: handleFieldChange,
  renderValue: (data) => <div>{data.join(", ")}</div>
}}

希望能帮助到你。如有任何疑问/澄清，请回复。