Question

我想构建一个应用程序，其中用户从React中的两个不同的下拉列表中选择他们最喜欢的食物和第二个喜欢的食物。我使用reactjs-dropdown-component构建了下拉列表，并将其放置在与我的主应用程序分开的脚本中。用户选择了他们最喜欢的两种食物后，我希望他们将其提交并打印到控制台。由于实际的下拉列表值位于单独的脚本中，因此我不确定如何获取该值。

这是下拉脚本：

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

使用此方法时，出现错误“ TypeError：无法读取null的属性'value'”。我想我有一个更好的方法应该这样做，只是想不到怎么做。

谢谢！

Answer 1

由于您使用的是React，因此请尽量避免使用普通的JS和DOM操作，而应使用React提供的工具。

您的问题的解决方案是在prop上添加FavoriteFood，每当您选择其他食物时都会调用它，然后在父组件上（在这种情况下为App ），则将它们添加到状态。

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的状态。

在React.js中返回多个下拉值

1 个答案: