如何从 React 的下拉组件中获取数据并更新状态？

Question

我是一名 React 初学者，我被这个问题困住了。我正在尝试制作用户注册表单。它包含三个文本字段和两个下拉按钮。我可以根据在文本字段中输入的数据更新状态，但我不能对下拉按钮执行相同操作。到目前为止，我正在分享我的方法的屏幕截图和下面的代码。

这是相同的代码：

注意：App.js 调用组件 Registration.js 进而调用组件 User.js

Registration.js 具有控制表单的所有逻辑、保存数据的状态以及处理向前和向后移动的函数（代码不完整）。

App.js

import React from 'react';
import './App.css';
import Registration from './components/Registration';

function App() {
  return (
    <div className="App">
      <h1>Hello World</h1>
      <h2>This is a sample app!</h2>
      <h5>Built by Anish Pal!</h5>
      <Registration /> 
    </div>
  );
}

export default App;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Registration.js

import React, { Component } from 'react';
import User from './User';

class Registration extends Component {

    // State to store user data
    state = {
        step: 1,
        userFirstName: '',
        userLastName: '',
        userEmail: '',
        userContact: '',
        userRole: '',
        userExperience: '',
        userEducation: '',
        userAddress: '',
        userBio: ''
    }

    // Move to the next page (component)
    nextStep = () => {
        const { step } = this.state;
        this.setState({
            step: step + 1
        });
    };

    // Move to the previous page (component)
    prevStep = () => {
        const { step } = this.state;
        this.setState({
            step: step + 1
        });
    };

    // Handle input field change (when data is entered)
    handleChange = input => e => {
        this.setState({ [input]: e.target.value });
    };

    render() {

        // Get the step counter
        const { step } = this.state;

        // Get the input fields
        const { userFirstName, userLastName, userEmail, userContact, userRole, userExperience, userEducation, userAddress, userBio } = this.state;

        // Assign a new variable to all the above
        const values =  { userFirstName, userLastName, userEmail, userContact, userRole, userExperience, userEducation, userAddress, userBio };

        // Switch the components based on the step counter
        switch(step) {
            case 1:
                return (
                    <User values={values} handleChange={this.handleChange} nextStep={this.nextStep} />
                );
            default:
                return (
                    <User />
                );
        }

    }
}

export default Registration

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

User.js

import React, { Component } from 'react';
import Card from 'react-bootstrap/Card';
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import Form from 'react-bootstrap/Form';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';

class User extends Component {

    // Handle movement to next component
    continue = e => {
        e.preventDefault();
        this.props.nextStep();
    };

    render() {

        // Extract the props passed from parent
        const { values, handleChange } = this.props;

        // Handle dropdown selections 
        const handleJobSelect = e => {
            console.log(e);
            this.setState({ 
                userRole: e 
            });
        }

        return (
            <div className="d-flex justify-content-center">
                <Card border="primary" style={{ width:"48rem" }}>
                    <Card.Header>REGISTER USER</Card.Header>
                    <Card.Body>
                        <Card.Title>Enter User Details</Card.Title>
                        <Container>
                            <Row>
                                <br />
                            </Row>
                            <Row>
                                <Col>
                                    <Form>
                                        <Form.Control 
                                            type="text" 
                                            placeholder="Enter First Name" 
                                            onChange={handleChange('userFirstName')}
                                            value={values.userFirstName}
                                        />
                                    </Form>
                                </Col>
                                <Col>
                                    <Form>
                                        <Form.Control 
                                            type="text" 
                                            placeholder="Enter Last Name" 
                                            onChange={handleChange('userLastName')}
                                            value={values.userLastName}
                                        />
                                    </Form>
                                </Col>
                            </Row>
                            <Row>
                                <br />
                            </Row>
                            <Row>
                                <Col>
                                    <Form>
                                        <Form.Control 
                                            type="text" 
                                            placeholder="Enter Email ID"
                                            onChange={handleChange('userEmail')}
                                            value={values.userEmail}
                                        />
                                    </Form>
                                </Col>
                            </Row>
                            <Row>
                                <br />
                            </Row>
                            <Row>
                                <Col>
                                    <DropdownButton
                                        id="dropdown-basic-button" 
                                        title="Select Job Role" 
                                        align="start"
                                        onClick={handleChange('userRole')}
                                        //onSelect={handleJobSelect}
                                        value={values.userRole}>
                                    <Dropdown.Item eventKey="Front End Web Developer">Front-End Web Developer</Dropdown.Item>
                                    <Dropdown.Item value="option-2">Back-End Web Developer</Dropdown.Item>
                                    <Dropdown.Item>Data Scientist</Dropdown.Item>
                                    <Dropdown.Item>Data Engineer</Dropdown.Item>
                                    <Dropdown.Item>Dev-Ops</Dropdown.Item>
                                    <Dropdown.Item>Cloud Architect</Dropdown.Item>
                                    </DropdownButton>
                                </Col>
                                <Col>
                                    <DropdownButton id="dropdown-basic-button" title="Select User Experience" align="start">
                                        <Dropdown.Item>No Experience (0-1 years)</Dropdown.Item>
                                        <Dropdown.Item>Some Experience (1-3 years)</Dropdown.Item>
                                        <Dropdown.Item>Medium Experience (3-5 years)</Dropdown.Item>
                                        <Dropdown.Item>Experienced (5-8 years)</Dropdown.Item>
                                        <Dropdown.Item>Specialist (8-10 years)</Dropdown.Item>
                                    </DropdownButton>
                                </Col>
                            </Row>
                        </Container>
                    </Card.Body>
                </Card>
            </div>
        )
    }
}

export default User

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

我已经尝试过什么

1. 我将onClick={handleChange('usereRole')} 更改为onChange={handleChange('userRole')}，但这并没有对状态产生任何影响。使用 onClick() 至少会在应用程序上产生一些响应，尽管我不断收到 undefined
2. 我使用了onSelect={handleJobSelect}，然后将函数定义为：

const handleChange = e => {
  console.log(e);
}

使用这种方法，我能够成功地将所需值从列表中获取到控制台中。但是，我仍然无法使用此值更新状态。我需要使用从下拉按钮中选择的项目更新状态变量 userRole。

另外，如果有人能告诉我如何使用所选菜单项更新按钮的标题，那将是一个额外的好处（最好向用户提供有关他们选择的反馈）。

我还想提一下，我正在使用 React-Bootstrap 作为组件，所以你们可以参考那里的任何其他信息。

Answer 1

您可以像这样更改 onSelect 回调

onClick={this.handleChange.bind(this)}

在 handleChange 函数中，您可以访问 e 中的选定值