javascript - React js 多选 [object Object], [object Object]
问题描述
我正在使用 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]。
你知道为什么会这样吗??
问候
解决方案
这个问题似乎是缺少道具renderValue
。value 是选择的值列表,但 renderValue 函数给出了实际的渲染逻辑。通过这个额外的道具,它应该可以正常工作。
根据官方文档:
renderValue 是function(value: any) => ReactNode
where value - 提供给组件的值。
示例代码:
SelectProps={{
multiple: true,
value: states.states,
onChange: handleFieldChange,
renderValue: (data) => <div>{data.join(", ")}</div>
}}
希望能帮助到你。回复任何疑问/澄清。
推荐阅读
- php - 如何在php中删除一张表的更多记录?
- maven - 将 Maven 转换为 Gradle - 父子 POM 初始化命令
- javascript - 使用 Cypress 中的 contains 选择 Select 元素
- javascript - 根据选择器选项属性更改按钮属性值
- javascript - 在电子 js(Ubuntu)上锁定关闭并最小化
- python - 当我尝试将 keras 数据集拆分为两个类时,数据基数是模棱两可的错误
- node.js - Vue.js 如何将字符串保存为数据库中的对象?
- c++ - 如何从 H264 中的 ffmpeg 读取 sei 未注册的用户数据?
- apache-spark - Spark 作业重新加载后目标同步 S3 存储桶中的重复数据
- ios - 了解 CoreBluetooth 扫描和连接流程