reactjs - 从 ReactDropdown 组件中获取选定的值

Question

我正在使用“react-dropdown”中的 ReactDropdown 在我的应用程序中创建各种下拉菜单。我在尝试从我的应用程序中的此组件中获取所选值时遇到问题。这是我尝试过的，但它给了我这个错误：TypeError：无法读取未定义的属性“值”

import React, { Component } from "react";
import ReactDropdown from "react-dropdown";
import 'react-dropdown/style.css';
import Checkbox from 'react-simple-checkbox';

class Reactor extends Component{
    state = {
        substrate: null,
        size: null,
        description: null
    }

    substrates = ['Potato', 'Carrots', 'Celery', 'Something'];

    handleDescription = (e) => {
        console.log("Worked (Description)")
        console.log(e.target.value)
        this.setState({
            description: e.target.value

        })
    }

    handleSizeDropdown = (e) => {
        console.log("Worked (Size)")
        console.log(e.target.value)
        this.setState({
            size: e.target.value()
        })
    }

    handleSubstrateDropdown = (e) => {
        console.log("Worked (Substrate)")
        console.log(e.value)
        this.setState({
            substrate: e.target.value})
    }


    render() {
        return (
            <div className={"card container col-12 col-lg-4 login-card mt-2 "}>
                <form>
                    <label className={"m-2"}>Select Substrate: </label>
                    <ReactDropdown options={this.substrates} onChange={this.handleSubstrateDropdown.bind(getSelection())}  /><br></br>
                     <label className={"m-2"}>Select Particulate Size: </label>
                    <ReactDropdown options={['Small','Medium', 'Large']} onChange={this.handleSizeDropdown.bind(getSelection())} /><br></br>
                    <label className={"m-2"}>Reactor Description: </label>
                    <textarea className="form-control" type={"text"} onChange={this.handleDescription} rows={"3"} /><br></br>
                </form>
            </div>
        );
    }
}

export default Reactor;

我可以做些什么来访问选定的值？我使用 React Developer Tools 调试的是 ReactDropdown 的状态变量有一个“选定的”javascript 对象，其值如下：

{
  "selected": {
    "label": "Select...",
    "value": ""
  },
  "isOpen": false
} 

标签： reactjs

Answer 1

我相信你只需要this在构造函数中为你的事件处理程序添加绑定......

  constructor(props) {
        super(props);

        this.state = {
            substrate: null,
            size: null,
            description: null
        }

        this.handleSubstrateDropdown = this.handleSubstrateDropdown.bind(this);
        this.handleSizeDropdown = this.handleSizeDropdown.bind(this);
        this.handleDescription = this.handleDescription.bind(this);
    }

---

此外，您没有正确设置状态。而是this.state = { //stuff } 在构造函数内部使用。并用于this.setState() 在构造函数之外修改状态。

constructor(props) {
     super(props);

     this.state = {
        substrate: null,
        size: null,
        description: null
     }

---

此外，您似乎正试图this.state.substrates通过仅使用不起作用的方法来访问substrates = ... 。您需要使用this.setState()来更改 中项目的值this.state。

this.setState({substrates : ['Potato', 'Carrots', 'Celery', 'Something']};

---

React 文档 > 组件

---

你能试试这些改变吗...

import React, {
    Component
} from "react";
import ReactDropdown from "react-dropdown";
import 'react-dropdown/style.css';
import Checkbox from 'react-simple-checkbox';

class Reactor extends Component {

    constructor(props) {
        super(props);

        this.state = {
            substrate: null,
            size: null,
            description: null
        }

        this.handleSubstrateDropdown = this.handleSubstrateDropdown.bind(this);
        this.handleSizeDropdown = this.handleSizeDropdown.bind(this);
        this.handleDescription = this.handleDescription.bind(this);
    }



    this.setState({substrates : ['Potato', 'Carrots', 'Celery', 'Something']};

    handleDescription = (e) => {
        console.log("Worked (Description)")
        console.log(e.target.value)
        this.setState({
            description: e.target.value

        })
    }

    handleSizeDropdown = (e) => {
        console.log("Worked (Size)")
        console.log(e.target.value)
        this.setState({
            size: e.target.value()
        })
    }

    handleSubstrateDropdown = (e) => {
        console.log("Worked (Substrate)")
        console.log(e.value)
        this.setState({
            substrate: e.target.value
        })
    }


    render() {
        return ( <
            div className = {
                "card container col-12 col-lg-4 login-card mt-2 "
            } >
            <
            form >
            <
            label className = {
                "m-2"
            } > Select Substrate: < /label> <
            ReactDropdown options = {
                this.substrates
            }
            onChange = {
                this.handleSubstrateDropdown.bind(getSelection())
            }
            /><br></br >
            <
            label className = {
                "m-2"
            } > Select Particulate Size: < /label> <
            ReactDropdown options = {
                ['Small', 'Medium', 'Large']
            }
            onChange = {
                this.handleSizeDropdown.bind(getSelection())
            }
            /><br></br >
            <
            label className = {
                "m-2"
            } > Reactor Description: < /label> <
            textarea className = "form-control"
            type = {
                "text"
            }
            onChange = {
                this.handleDescription
            }
            rows = {
                "3"
            }
            /><br></br >
            <
            /form> <
            /div>
        );
    }
}