在react中，通过道具以多步形式导入状态的正确方法是什么？

Question

我试图在react中建立一个步进式表单，它有一个主父组件 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;

我想做的实际上是同步和持久化的数据的 <Select/> 和 <img> 在 Registration.js 组件作为典型的我们看到的步进形式。

但是，由于在 Credentials,

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

的 img.src 实际上是由函数 selectCountryChange并保持其价值。img.src 执拗的我想到了创造 countryFlagHandler 在 Registration 并将其导入到 Credential

但当我选择任何值时，它给了我这个错误。

TypeError.Canot read property 'flagImg' of undefined: 无法读取未定义的属性'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方法中，在React中的 step 是未定义的。您应该使用 this.state.step 或从您的 state. 我不知道你为什么用 export class 和 export default 一起。而且记住，React组件的名称必须以大写字母开头。