在反应中通过多步形式的道具导入 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 组件的名称必须以大写字母开头。