在Reactjs中返回多个下拉值
在Reactjs中返回多个下拉值
提问于 2019-05-22 02:17:46
我想构建一个应用程序，用户可以在React中从两个不同的下拉列表中选择他们最喜欢的食物和第二喜欢的食物。我使用reactjs- dropdown -component构建了dropdown，并将其放在独立于我的主应用程序的脚本中。在用户选择了他们最喜欢的两种食物之后，我希望他们提交并打印到控制台。我不确定如何检索这个值，因为实际的dropdown值在一个单独的脚本中。
下面是dropdown脚本：
import React, { Component } from 'react';
import {DropdownMultiple, Dropdown} from 'reactjs-dropdown-component';
class FavoriteFood extends Component {
constructor() {
super();
this.state = {
food: [
{
id: 0,
title: 'Pizza',
selected: false,
key: 'food'
},
{
id: 1,
title: 'Cookies',
selected: false,
key: 'food'
},
{
id: 2,
title: 'Apples',
selected: false,
key: 'food'
},
{
id: 3,
title: 'Yogurt',
selected: false,
key: 'food'
},
{
id: 4,
title: 'Crackers',
selected: false,
key: 'food'
},
{
id: 5,
title: 'Bread',
selected: false,
key: 'food'
},
{
id: 6,
title: 'Cheese',
selected: false,
key: 'food'
},
],
}
}
toggleSelected = (id, key) => {
let temp = JSON.parse(JSON.stringify(this.state[key]));
temp[id].selected = !temp[id].selected;
this.setState({
[key]: temp
})
}
render() {
return(
<div style={{width: '15%', display: 'inline-block', padding: '10px'}}>
<DropdownMultiple
titleHelper="Food"
title="Favorite Food"
list={this.state.food}
toggleItem={this.toggleSelected}
/>
</div>
)
}
}
export default FavoriteFood下面是App的主脚本：
import React, { Component } from 'react';
import FavoriteFood from './favoriteFood.js';
class App extends Component {
constructor() {
super();
this.state={
}
}
getValues(){
console.log(document.getElementById('firstFav').value)
console.log(document.getElementById('secondFav').value)
}
render () {
return (
<FavoriteFood id='firstFav' />
<FavoriteFood id='secondFav' />
<button onClick={() => getValues()}>Print Values</button>
)
}
}
export default App当我使用这个appraoch时，我得到了错误'TypeError: Cannot read property 'value‘of null’。我想我应该有更好的方法来做这件事，只是想不出怎么做。
谢谢!
回答 1
Stack Overflow用户
发布于 2019-05-22 03:25:00
由于您使用的是React，因此尽量避免使用普通的JS和DOM操作，而应使用React提供的工具。
问题的解决方案是向FavoriteFood添加一个状态，每当您选择不同的食物时都会调用它，然后在父组件(在本例中为App)上，将它们添加到prop。
更新了FavoriteFood中的函数
toggleSelected = (id, key) => {
let temp = JSON.parse(JSON.stringify(this.state[key]));
temp[id].selected = !temp[id].selected;
this.setState({
[key]: temp
})
this.props.updateSelection({[key]: temp})
}然后，在App中，不是尝试从DOM中获取更新值，而是从子组件中获取它们：
render () {
return (
<FavoriteFood id='firstFav' onUpdate={updateFood} />
<FavoriteFood id='secondFav' onUpdate={updateFood} />
<button onClick={() => getValues()}>Print Values</button>
)
}updateFood应该是这样的：
const updateFood = (foodObj) => {
this.setState({
...foodObj
});
}从现在开始，每次更新时，您的数据都将在App的状态中。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56244242
复制相关文章
相似问题