在反應中通過多步形式的道具導入 state 的正確方法是什么

Question

我正在嘗試在反應中構建一個步進形式
它有一個主要的父組件Register ，如下所示：

import React, { Component } from 'react';

export class registration extends Component {
    state = {
        step:1,
        CountryFlag: 'https://raw.githubusercontent.com/MeRahulAhire/country-calling-code-html/master/phone_icon.png',
        CountryCode: ''
    };
    handleChange = (input) => (e) => {
        this.setState({ [input]: e.target.value });
    };

    countryFlagHandler = () =>{
        this.setState({CountryFlag : this.props.state.flagImg})
      }
    render() {
        const { CountryFlag, CountryCode } = this.state;
        const values = {CountryFlag, CountryCode };
        
        switch (step) {
            case 1:
              return(
                <Credential
                handleChange={this.handleChange}
                countryFlagHandler={this.countryFlagHandler}
                values={values}
                />
                
              )
             default:
                 return (<h1>hello React App</h1>)
           
        };
    }
}

export default registration;

和一個子組件Credential

import React, { Component } from 'react'

export class Credential extends Component {
    state = {
        flagImg: '',
    };
    render() {
        const { values, handleChange, countryFlagHandler } = this.props;

        const selectCountryChange = () => {
            const img = document.querySelector('#img');
            const select = document.querySelector('#country');
            img.src = `https://flagpedia.net/data/flags/h80/${select.selectedOptions[0].dataset.countrycode.toLowerCase()}.webp`;

            this.setState({
                flagImg: `https://flagpedia.net/data/flags/h80/${select.selectedOptions[0].dataset.countrycode.toLowerCase()}.webp`
            });
            countryFlagHandler()
        };
        return (
            <div>
                <div class="image" onChange={selectCountryChange}>  
                    <img src={values.CountryFlag} id="img"/>  
                </div>
                <select id="country" onChange={handleChange('select')} defaultValue={values.select}>  
                    <option data-countryCode="IN" value="91">India</option>  
                    <option data-countryCode="US" value="1">US</option>  
                    <option data-countryCode="GB" value="44">UK</option>  
                </select> 
            </div>
        )
    }
}

export default Credential;

我正在嘗試做的實際上是在Registration.js組件中同步和持久化<Select/>和<img>的數據，就像我們在步進表單中看到的那樣。

但是，就像在Credentials中一樣，

<img src={values.CountryFlag} id="img"/>

img.src實際上由 function selectCountryChange操作並保持img.src的值保持不變我想在Registration中創建countryFlagHandler並將其導入到Credential

但是當我選擇任何值時，它給了我這個錯誤：

TypeError：無法讀取未定義的屬性“flagImg”

Registration.countryFlagHandler
C:/Users/Rahul/Desktop/cfm-usersignup/src/public/form/registration.js:53
  50 |   this.setState({ [input]: e.target.value });
  51 | };
  52 | countryFlagHandler = () =>{
> 53 |   this.setState({CountryFlag : this.props.state.flagImg})
     | ^  54 | }
  55 | 
  56 |

&

selectCountryChange
C:/Users/Rahul/Desktop/cfm-usersignup/src/public/form/credential.js:31
  28 |  this.setState({
  29 |      flagImg: `https://flagpedia.net/data/flags/h80/${select.selectedOptions[0].dataset.countrycode.toLowerCase()}.webp`
  30 |  });
> 31 |  countryFlagHandler();
     | ^  32 | };
  33 | return (
  34 |  <div>

誰能告訴我如何糾正我的錯誤？

Answer 1

在 Registration 組件的 render 方法中， step是未定義的。 您應該使用this.state.step或從您的state解構它。 我不明白你為什么同時使用export class和export default 。 請記住，React 組件的名稱必須以大寫字母開頭。