Javascript Reactjs：如何在提交时路由到另一个表单并将提交的数据发送到新页面

我需要一些帮助。我创建了三个表单类：Employee、Address和Authentication。在员工表单中，当用户单击提交按钮时，我希望它转到地址表单页面，并将员工表单数据发送到地址表单页面。我知道我可以把所有这些放在一页纸上，但这会使阅读代码变得困难。我正在努力使它与我的后端（spring boot）匹配initialState是一个Json，如果您不知道，我将从另一个文件导入它

员工类别的代码

class Employee extends Component {
state = initialState;

constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
}

handleChange = event => {
    const {formData} = this.state;
    this.setState({
        formData: {
            ...formData, // leave other values unchanged
            [event.target.name]: event.target.value, // update the changed value
        }
    });
}

validate = () => {
    const {formData, errors} = this.state;
    const {firstName, lastName, email, dataOfBirth, phoneNum} = formData;
    let {firstNameError, lastNameError, emailError} = errors;
    if (!firstName) {
        firstNameError = 'First name can not be blank'
    }
    if (!lastName) {
        lastNameError = 'Last name can not be blank'
    }
    if (!validateEmail(email)) {
        emailError = `${email} is not valid email`
    }
    if (!dataOfBirth) {
        console.log(dataOfBirth.length)
        dataOfBirthError = 'Enter a valid date of birth'
    }
    if (!phoneNum) {
        phoneNumError = 'Enter a valid phone'
    }
    if (!validatePhoneNumber(phoneNum)) {
        phoneNumError = 'Enter a valid phone number'
    }


    if (firstNameError || lastNameError) {
        this.setState( {
            errors: {
                firstNameError, lastNameError, emailError,
                dataOfBirthError
            }
        })
        return false
    }
    return true
}

handleSubmit(event) {
    event.preventDefault()
    const isValid = this.validate();
    if (isValid) {
        this.setState(initialState)
        this.props.push("/addressForm")
    }
}

render() {
    return (
        <div className="container_fluid">
            <div className="registration_form_container">
                <div className="register_context">
                    <form action="" onSubmit={this.handleSubmit} className="registration_form">
                        <div className="form-group">
                            <input type="text" name="firstName" id="firstName"
                                   placeholder={"Enter first name"}
                                   onChange={this.handleChange}
                            />
                            <span>{this.state.errors.firstNameError}</span>
                        </div>
                        <div className="form-group">
                            <input type="text" name="lastName" id="lastName"
                                   placeholder={"Enter last name"}
                                   onChange={this.handleChange}
                            />
                            <span>{this.state.errors.lastNameError}</span>
                        </div>
                        <div className="form-group">
                            <input type="text" name="email" id="email"
                                   placeholder={"Enter email address"}
                                   onChange={this.handleChange}
                            />
                            <span>{this.state.errors.emailError}</span>
                        </div>
                
                        <div className="form-group custom_btn_container">
                            <input type="submit" className="btn" value="Register"/>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    )
}
}

export default Employee;

class Address extends Component {

state = initialState;

constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
}

handleChange = event => {
    const {formData} = this.state;
    this.setState({
        formData: {
            ...formData, // leave other values unchanged
            [event.target.name]: event.target.value, // update the changed value
        }
    });
}

validate = () => {
    const {state, city, street, zipcode} = formData.employeeAddress;
    let {firstNameError, lastNameError, emailError, dataOfBirthError, phoneNumError} = errors;
    let {employeeAddressError: {streetError, stateError, cityError, zipcodeError}} = errors
   
    if (!street) {
        streetError = "Street can not be blank"
    }
    if (!city) {
        cityError = "Street can not be blank"
    }

    if (streetError || cityError || stateError) {

        console.log(dataOfBirth)
        this.setState( {
            errors: {
                employeeAddressError: {
                    streetError,
                    cityError,
                    stateError,
                    zipcodeError
                }
            }
        })
        return false
    }
    return true
}

handleSubmit(event) {
    event.preventDefault()
    const isValid = this.validate();
    if (isValid) {
        this.setState(initialState)
    }
}

render() {
return (
    <div className="container_fluid login_form_main_container">
        <div className="address_context">
            <div className="form-group">
                <input type="text" name="street" id="street"
                       placeholder={"Enter street address"}
                       onChange={this.handleChange}
                />
                <span>{this.state.errors.employeeAddressError.streetError}</span>
            </div>
      
            <div className="form-group custom_btn_container">
                <input type="submit" className="btn" value="Register"/>
            </div>
        </div>
    </div>
)
}
}

export default Address;

return (
  <Router>
      <div className="App">
          <Header />
              <div className="content">
                  <Switch>
                      <Route path="/register" component={Employee} />
                      <Route path="/login">
                          <Login Login={LoginDetail} error={error} />
                      </Route>
                      <Route path="/addressForm" component={Address} />
                      <Route path="/" component={Home} />
                  </Switch>
              </div>
      </div>
  </Router>
);

class雇员扩展组件{
状态=初始状态；
建造师（道具）{
超级（道具）；
this.handleChange=this.handleChange.bind（this）
this.handleSubmit=this.handleSubmit.bind（this）
}
handleChange=事件=>{
const{formData}=this.state；
这是我的国家({
表格数据：{
…formData，//保留其他值不变
[event.target.name]：event.target.value，//更新更改后的值
}
});
}
验证=（）=>{
const{formData，errors}=this.state；
const{firstName，lastName，email，dataOfBirth，phoneNum}=formData；
让{firstNameError，lastNameError，emailError}=errors；
如果（！firstName）{
firstNameError='名字不能为空'
}
如果（！lastName）{
lastNameError='姓氏不能为空'
}
如果（！validateEmail（电子邮件））{
emailError=`${email}不是有效的电子邮件`
}
如果（！dataOfBirth）{
console.log（dataOfBirth.length）
DataOfBritherRor='输入有效的出生日期'
}
如果（！phoneNum）{
phoneNumError='输入有效电话'
}
如果（！validatePhoneNumber（phoneNum））{
phoneNumError='输入有效的电话号码'
}
if（firstnamererror | | lastnamererror）{
此.setState（{
错误：{
firstNameError、lastNameError、emailError、，
反射镜数据
}
})
返回错误
}
返回真值
}
handleSubmit（事件）{
event.preventDefault（）
const isValid=this.validate（）；
如果（有效）{
this.setState（initialState）
this.props.push（“/addressForm”）
}
}
render（）{
返回(
{this.state.errors.firstNameError}
{this.state.errors.lastNameError}
{this.state.errors.emailError}
)
}
}
导出默认员工；

地址类的代码

class Employee extends Component {
state = initialState;

constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
}

handleChange = event => {
    const {formData} = this.state;
    this.setState({
        formData: {
            ...formData, // leave other values unchanged
            [event.target.name]: event.target.value, // update the changed value
        }
    });
}

validate = () => {
    const {formData, errors} = this.state;
    const {firstName, lastName, email, dataOfBirth, phoneNum} = formData;
    let {firstNameError, lastNameError, emailError} = errors;
    if (!firstName) {
        firstNameError = 'First name can not be blank'
    }
    if (!lastName) {
        lastNameError = 'Last name can not be blank'
    }
    if (!validateEmail(email)) {
        emailError = `${email} is not valid email`
    }
    if (!dataOfBirth) {
        console.log(dataOfBirth.length)
        dataOfBirthError = 'Enter a valid date of birth'
    }
    if (!phoneNum) {
        phoneNumError = 'Enter a valid phone'
    }
    if (!validatePhoneNumber(phoneNum)) {
        phoneNumError = 'Enter a valid phone number'
    }


    if (firstNameError || lastNameError) {
        this.setState( {
            errors: {
                firstNameError, lastNameError, emailError,
                dataOfBirthError
            }
        })
        return false
    }
    return true
}

handleSubmit(event) {
    event.preventDefault()
    const isValid = this.validate();
    if (isValid) {
        this.setState(initialState)
        this.props.push("/addressForm")
    }
}

render() {
    return (
        <div className="container_fluid">
            <div className="registration_form_container">
                <div className="register_context">
                    <form action="" onSubmit={this.handleSubmit} className="registration_form">
                        <div className="form-group">
                            <input type="text" name="firstName" id="firstName"
                                   placeholder={"Enter first name"}
                                   onChange={this.handleChange}
                            />
                            <span>{this.state.errors.firstNameError}</span>
                        </div>
                        <div className="form-group">
                            <input type="text" name="lastName" id="lastName"
                                   placeholder={"Enter last name"}
                                   onChange={this.handleChange}
                            />
                            <span>{this.state.errors.lastNameError}</span>
                        </div>
                        <div className="form-group">
                            <input type="text" name="email" id="email"
                                   placeholder={"Enter email address"}
                                   onChange={this.handleChange}
                            />
                            <span>{this.state.errors.emailError}</span>
                        </div>
                
                        <div className="form-group custom_btn_container">
                            <input type="submit" className="btn" value="Register"/>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    )
}
}

export default Employee;

class Address extends Component {

state = initialState;

constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
}

handleChange = event => {
    const {formData} = this.state;
    this.setState({
        formData: {
            ...formData, // leave other values unchanged
            [event.target.name]: event.target.value, // update the changed value
        }
    });
}

validate = () => {
    const {state, city, street, zipcode} = formData.employeeAddress;
    let {firstNameError, lastNameError, emailError, dataOfBirthError, phoneNumError} = errors;
    let {employeeAddressError: {streetError, stateError, cityError, zipcodeError}} = errors
   
    if (!street) {
        streetError = "Street can not be blank"
    }
    if (!city) {
        cityError = "Street can not be blank"
    }

    if (streetError || cityError || stateError) {

        console.log(dataOfBirth)
        this.setState( {
            errors: {
                employeeAddressError: {
                    streetError,
                    cityError,
                    stateError,
                    zipcodeError
                }
            }
        })
        return false
    }
    return true
}

handleSubmit(event) {
    event.preventDefault()
    const isValid = this.validate();
    if (isValid) {
        this.setState(initialState)
    }
}

render() {
return (
    <div className="container_fluid login_form_main_container">
        <div className="address_context">
            <div className="form-group">
                <input type="text" name="street" id="street"
                       placeholder={"Enter street address"}
                       onChange={this.handleChange}
                />
                <span>{this.state.errors.employeeAddressError.streetError}</span>
            </div>
      
            <div className="form-group custom_btn_container">
                <input type="submit" className="btn" value="Register"/>
            </div>
        </div>
    </div>
)
}
}

export default Address;

return (
  <Router>
      <div className="App">
          <Header />
              <div className="content">
                  <Switch>
                      <Route path="/register" component={Employee} />
                      <Route path="/login">
                          <Login Login={LoginDetail} error={error} />
                      </Route>
                      <Route path="/addressForm" component={Address} />
                      <Route path="/" component={Home} />
                  </Switch>
              </div>
      </div>
  </Router>
);

类地址扩展组件{
状态=初始状态；
建造师（道具）{
超级（道具）；
this.handleChange=this.handleChange.bind（this）
this.handleSubmit=this.handleSubmit.bind（this）
}
handleChange=事件=>{
const{formData}=this.state；
这是我的国家({
表格数据：{
…formData，//保留其他值不变
[event.target.name]：event.target.value，//更新更改后的值
}
});
}
验证=（）=>{
const{state，city，street，zipcode}=formData.employeeAddress；
设{firstnamererror，lastnamererror，emailError，dataofbirror，phonenumeror}=errors；
设{employeeAddressError:{streetError，stateError，cityError，zipcodeError}}=errors
如果（！街）{
streetError=“街道不能为空”
}
如果（！城市）{
cityError=“街道不能为空”
}
if（streetError | | cityError | | statererror）{
console.log（dataOfBirth）
此.setState（{
错误：{
employeeAddressError：{
streetError，
城主，
国家错误，
zipcodeError
}
}
})
返回错误
}
返回真值
}
handleSubmit（事件）{
event.preventDefault（）
const isValid=this.validate（）；
如果（有效）{
this.setState（initialState）
}
}
render（）{
返回(
{this.state.errors.employeeAddressError.streetError}
)
}
}
导出默认地址；

在App.js中

class Employee extends Component {
state = initialState;

constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
}

handleChange = event => {
    const {formData} = this.state;
    this.setState({
        formData: {
            ...formData, // leave other values unchanged
            [event.target.name]: event.target.value, // update the changed value
        }
    });
}

validate = () => {
    const {formData, errors} = this.state;
    const {firstName, lastName, email, dataOfBirth, phoneNum} = formData;
    let {firstNameError, lastNameError, emailError} = errors;
    if (!firstName) {
        firstNameError = 'First name can not be blank'
    }
    if (!lastName) {
        lastNameError = 'Last name can not be blank'
    }
    if (!validateEmail(email)) {
        emailError = `${email} is not valid email`
    }
    if (!dataOfBirth) {
        console.log(dataOfBirth.length)
        dataOfBirthError = 'Enter a valid date of birth'
    }
    if (!phoneNum) {
        phoneNumError = 'Enter a valid phone'
    }
    if (!validatePhoneNumber(phoneNum)) {
        phoneNumError = 'Enter a valid phone number'
    }


    if (firstNameError || lastNameError) {
        this.setState( {
            errors: {
                firstNameError, lastNameError, emailError,
                dataOfBirthError
            }
        })
        return false
    }
    return true
}

handleSubmit(event) {
    event.preventDefault()
    const isValid = this.validate();
    if (isValid) {
        this.setState(initialState)
        this.props.push("/addressForm")
    }
}

render() {
    return (
        <div className="container_fluid">
            <div className="registration_form_container">
                <div className="register_context">
                    <form action="" onSubmit={this.handleSubmit} className="registration_form">
                        <div className="form-group">
                            <input type="text" name="firstName" id="firstName"
                                   placeholder={"Enter first name"}
                                   onChange={this.handleChange}
                            />
                            <span>{this.state.errors.firstNameError}</span>
                        </div>
                        <div className="form-group">
                            <input type="text" name="lastName" id="lastName"
                                   placeholder={"Enter last name"}
                                   onChange={this.handleChange}
                            />
                            <span>{this.state.errors.lastNameError}</span>
                        </div>
                        <div className="form-group">
                            <input type="text" name="email" id="email"
                                   placeholder={"Enter email address"}
                                   onChange={this.handleChange}
                            />
                            <span>{this.state.errors.emailError}</span>
                        </div>
                
                        <div className="form-group custom_btn_container">
                            <input type="submit" className="btn" value="Register"/>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    )
}
}

export default Employee;

class Address extends Component {

state = initialState;

constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
}

handleChange = event => {
    const {formData} = this.state;
    this.setState({
        formData: {
            ...formData, // leave other values unchanged
            [event.target.name]: event.target.value, // update the changed value
        }
    });
}

validate = () => {
    const {state, city, street, zipcode} = formData.employeeAddress;
    let {firstNameError, lastNameError, emailError, dataOfBirthError, phoneNumError} = errors;
    let {employeeAddressError: {streetError, stateError, cityError, zipcodeError}} = errors
   
    if (!street) {
        streetError = "Street can not be blank"
    }
    if (!city) {
        cityError = "Street can not be blank"
    }

    if (streetError || cityError || stateError) {

        console.log(dataOfBirth)
        this.setState( {
            errors: {
                employeeAddressError: {
                    streetError,
                    cityError,
                    stateError,
                    zipcodeError
                }
            }
        })
        return false
    }
    return true
}

handleSubmit(event) {
    event.preventDefault()
    const isValid = this.validate();
    if (isValid) {
        this.setState(initialState)
    }
}

render() {
return (
    <div className="container_fluid login_form_main_container">
        <div className="address_context">
            <div className="form-group">
                <input type="text" name="street" id="street"
                       placeholder={"Enter street address"}
                       onChange={this.handleChange}
                />
                <span>{this.state.errors.employeeAddressError.streetError}</span>
            </div>
      
            <div className="form-group custom_btn_container">
                <input type="submit" className="btn" value="Register"/>
            </div>
        </div>
    </div>
)
}
}

export default Address;

return (
  <Router>
      <div className="App">
          <Header />
              <div className="content">
                  <Switch>
                      <Route path="/register" component={Employee} />
                      <Route path="/login">
                          <Login Login={LoginDetail} error={error} />
                      </Route>
                      <Route path="/addressForm" component={Address} />
                      <Route path="/" component={Home} />
                  </Switch>
              </div>
      </div>
  </Router>
);

返回(
);

在标题页内

导出默认函数头（）{
返回(
标志
家
系
登记册
登录
)

---

}

您可以使用重定向路由器重定向功能传递道具

这不是发送路由器参数表单数据的好方法，只是为了代码的可读性，无需添加其他路由器，我建议使用诸如或

上下文API

之类的状态管理，或者如果您不想要它们中的任何一个，只需添加另一个组件，例如名为

EmployeeForm

的组件，并将

Employee

和

Address

组件添加到其中（为了更好地实现UI/UX，您可以根据用户需要在表单之间切换）并在

EmployeeFor中传递如下数据