Question

我正在尝试从某些http地址上的JSON数组中获取一些值。因此，当我从地图上输入字段时，得到的是对象而不是值。在输入字段之外，它可以正常工作。

    <FormGroup>
         <Label for="description">Description</Label>
         <Input type="text" name="description" id="description" value={Object.keys(item.storeByClothes).map(clothes =>{return <p>{item.storeByClothes[clothes].description}</p>})}
           onChange={this.handleChange} autoComplete="description"/>
    </FormGroup>
{Object.keys(item.storeByClothes).map(clothes =>{return <p>{item.storeByClothes[clothes].description}</p>})}

在<FormGroup>内部，我得到了对象。外部是必需的值。我在做什么错了？

Answer 1

当前，JSX编译器将<p>...转换为React组件（对象），然后将其作为input传递到value中。要显示变量的内容，浏览器调用.toString()方法。所以最后您会看到“ [Object object]”。根据您的需要，您需要进行不同的更改。

假设您希望在输入中看到HTML标记（例如字符串），则应将其设置为字符串（例如使用模板字符串）：

.map(el => `<p>....`

或者，如果您需要将其视为实时HTML标记，则不应该将其放入<input value

Object.keys映射返回对象Object代替ReactJS中文本输入形式的值

1 个答案: