为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

呼啦一阵风 2023-01-06 16:24:27

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


  <TextField

        classes={{ root: classes.root }}

        select

        name="states"

        id="states"

        fullWidth

        label="states where you want to work" 

        SelectProps={{

          multiple: true,

          value: states.states,

          onChange: handleFieldChange

        }}

      >

        {listStates.map(col => (

              <MenuItem selected classes={{ selected: classes.selected }} key={col} value={col}>

                  <Checkbox checked={states.states.indexOf(col) > -1} />

                  <ListItemText primary={col} />

              </MenuItem>

            ))} 

      </TextField>

这是 handleFieldChange 函数:


  const handleFieldChange = event => {

      event.persist();

      setStates(states => ({

        ...states,

        [event.target.name]:

          event.target.type === "checkbox"

            ? event.target.checked

            : event.target.value

      }));

    };

这是状态数组:


const listStates = [ "Aguascalientes", "Baja California", "Baja California Sur", "Campeche", "CDMX", "Coahuila de Zaragoza", "Colima", "Chiapas", "Chihuahua", "Durango", "Guanajuato", "Guerrero", "Hidalgo", "Jalisco", "EDOMEX", "Michoacán de Ocampo", "Morelos", "Nayarit", "Nuevo León", "Oaxaca", "Puebla", "Querétaro", "Quintana Roo", "San Luis Potosí", "Sinaloa", "Sonora",  "Tabasco",  "Tamaulipas",  "Tlaxcala", "Veracruz de Ignacio de la Llave", "Yucatán", "Zacatecas"];

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


你知道为什么会这样吗??


查看完整描述

1 回答

?
茅侃侃

TA贡献1587条经验 获得超21个赞

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


根据官方文档:

renderValue 是function(value: any) => ReactNodevalue - 提供给组件的值。


示例代码:


SelectProps={{

  multiple: true,

  value: states.states,

  onChange: handleFieldChange,

  renderValue: (data) => <div>{data.join(", ")}</div>

}}

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


查看完整回答
反对 回复 2023-01-06
  • 1 回答
  • 0 关注
  • 11 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信