如何從 React 的下拉組件中獲取數據並更新 state？

Question

我是一個初學者 React 開發人員，我被這個問題困住了。 我正在嘗試制作用戶注冊表單。 它包含三個文本字段和兩個下拉按鈕。 我可以從文本字段中輸入的數據更新 state，但我不能對下拉按鈕執行相同操作。 到目前為止，我正在分享我的方法的屏幕截圖和下面的代碼。

這是相同的代碼：

注意：App.js 調用組件Registration.js進而調用組件User.js

Registration.js具有控制表單的所有邏輯、保存數據的 state 以及處理向前和向后移動的函數（代碼不完整）。

應用程序.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>

我嘗試過的

1. 我將onClick={handleChange('usereRole')}更改為onChange={handleChange('userRole')}但這並沒有在 state 中產生任何變化。 盡管我一直不確定，但使用onClick()至少會在應用程序上產生一些響應
2. 我使用onSelect={handleJobSelect}然后將 function 定義為：

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

使用這種方法，我能夠成功地將所需值從列表中獲取到控制台中。 但是，我仍然無法使用此值更新 state。 我需要使用從下拉按鈕中選擇的項目更新 state 變量userRole 。

此外，如果有人能告訴我如何使用選定的菜單條目更新按鈕的標題，那將是一個額外的好處（最好向用戶提供有關他們選擇的反饋）。

我還想提一下我正在使用 React-Bootstrap 作為組件，所以你們可以參考那里的任何其他信息。

Answer 1

您可以像這樣更改 onSelect 回調

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

在handleChange function 內，您可以訪問e 中的選定值