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

Question

我是一个初级React开发人员，我被这个问题卡住了。我正试图制作一个用户注册表。它包含三个文本字段和两个下拉按钮。我能够通过在文本字段中输入的数据更新状态，但我不能对下拉按钮进行同样的操作。我现在分享我的方法的截图和下面的代码。

下面是相同的代码。

注意：App.js调用组件 注册.js 反过来调用组件的 用户.js

注册.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>

注册.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>

用户.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>

我已经尝试过的东西

我换了 onClick={handleChange('usereRole')} 到 onChange={handleChange('userRole')} 但这并没有产生任何状态的变化。使用 onClick() 至少能在应用上产生一些响应，虽然我一直在得到 未定义
我用的是 onSelect={handleJobSelect} 然后将函数定义为.NET。

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

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

另外，如果有谁能告诉我如何更新按钮的标题与所选的菜单条目，这将是一个额外的奖励（为用户提供关于其选择的反馈是很好的）。

我还想说，我正在使用React-Bootstrap来制作组件，所以你们可以参考那里的任何额外信息。

Answer 1

你可以像这样改变onSelect的回调方式

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

在handleChange函数中，你可以在e中访问所选的值。

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

问题描述投票：0回答：1

1个回答

最新问题

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

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1