时间戳

首页 > 解决方案 > 是否可以选择 Material UI 选择的对象？

reactjs - 是否可以选择 Material UI 选择的对象？

问题描述

这是与材质 ui 的反应，使用 TextField 和 ManuItem 组件构建一个选择字段。我的代码：

{data.category?.map((category) => (
     <MenuItem
         key={category.id}
         value={{
             id: category.id,
             percentage: category.percentage,
        }}
     >
         {category.name}
     </MenuItem>

但给了我这个控制台警告：Material-UI: You have provided an out-of-range value [object Object]for the select...

任何想法？

标签： reactjsmaterial-ui

解决方案

这是因为 TextField 只接受列表中的一个值。在这种情况下，列表项是对象而不是字符串，因此它们不匹配，因此会发出警告。

这是第二种方法的工作代码框（使用对象作为值）

  1. 您可以将项目的值更改为字符串并将 TextField 的值设置为字符串值之一。

           <MenuItem
         key={d.id}
         value={d.name}
       >

  2. 或者您必须对 json 对象进行字符串化，因为 HTML 属性不能包含 JSON 对象。因此，它尝试通过对生成 '[object Object]' 作为其值的对象使用 toString() 方法来生成有效字符串。因此，如果您对对象进行字符串化，您的列表项将具有整个对象的字符串化值（请注意，如果对象非常大，这可能不是最佳方法）。

           <MenuItem
         key={d.id}
         value={JSON.stringify({
           id: d.id,
           percentage: d.percentage,
           name: d.name
         })}
       >

并将 value 道具添加到 TextField

      <TextField
        id="outlined-select"
        select
        required
        label="Select"
        variant="outlined"
        onChange={handleChange}
        helperText="Please select a value"
        InputLabelProps={{
          shrink: true
        }}
        value={selectState || ""} // THIS IS NEEDED
        defaultValue={""}
      >

推荐阅读