reactjs - 提交后如何更改道具并将值传递给另一个组件？

Question

我试图将电话号码值从第一步传递到两步，但我的道具在提交后没有改变。这是我父母的第一步代码：

class Register extends Component {
    render() {
        return (
            <div className={""}>
                <div className="row register-row-edit">
                    <div className={"col-lg-6 col-12"}>
                        <RegisterGif/>
                    </div>

                        <div className={"col-lg-6 col-12 mt-5"}>
                            <RegisterMain props={this.props.values} onChange={this.props.handleChange}/>
                        </div>

                </div>

            </div>
        );
    }
}

export default Register;

这是我RegisterMain在其中形成并在其上传递道具的组件：

     class RegisterMain extends Component {
    constructor(props) {
        super(props);
        this.onSubmit = this.onSubmit.bind(this)
        this.onChange = this.onChange.bind(this)

    }

    static propTypes = {
        isAuthenticated: PropTypes.bool,
        register: PropTypes.func.isRequired,
    }

    onSubmit = (e) => {
        e.preventDefault();
        const {
            firstName,
            lastName,
            phoneNumber,
            address,
            state,
            city
        } = this.state;
        const newUser = {
            firstName,
            lastName,
            phoneNumber,
            address,
            state,
            city
        };
        this.props.register(newUser);
        console.log(newUser)
    }
    onChange(event) {
        const value = event.target.value;
        this.setState({
            [event.target.name]: value
        })
    }
 
    render() {

        return (
            <div className="register-form-box">
              
                <form className="login-form pt-2 float-right" onSubmit={this.onSubmit} >
                    <Row>
                        <div className={"col-12 col-lg-6"}>

                            <input type={"text"}
                                   placeholder={"Last Name"}
                                   name={"lastName"}
                                   onChange={this.onChange}
                                   autoComplete="on"
                                   value={this.state.lastName}
                                   onBlur={(e) => e.target.placeholder = "Last Name"}
                                   onFocus={(e) => e.target.placeholder = ""}
                                   className={" info-login-input"}/>
                        </div>
                        <div className={"col-12 col-lg-6"}>
                            <input
                                name={"firstName"}
                                type={"text"}
                                placeholder={"First Name"}
                                onChange={this.onChange}
                                autoComplete="on"
                                value={this.state.firstName}
                                onBlur={(e) => e.target.placeholder = "First Name"}
                                onFocus={(e) => e.target.placeholder = ""}
                                className={"info-login-input"}/>
                        </div>
                    </Row>
                    <Row>
                        <div className="col-12">
                            <input type={"text"}
                                   placeholder={"Phone"}
                                   name={"phoneNumber"}
                                   onChange={this.onChange}
                                   autoComplete="on"
                                   value={this.state.phoneNumber}
                                   onBlur={(e) => e.target.placeholder = "Phone"}
                                   onFocus={(e) => e.target.placeholder = ""}
                                   className={" mt-3 info-login-input"}/>
                        </div>
                    </Row>
                    <Row>
                        <div className="col-lg-6 col-12 ">

                            <input type={"text"}
                                   placeholder={"City"}
                                   name={"city"}
                                   onChange={this.onChange}
                                   autoComplete="on"
                                   value={this.state.city}
                                   onBlur={(e) => e.target.placeholder = "City"}
                                   onFocus={(e) => e.target.placeholder = ""}
                                   className={"block mt-3 info-login-input"}/>
                        </div>
                        <div className="col-lg-6 col-12">
                            <input type={"text"}
                                   placeholder={"Province"}
                                   name={"state"}
                                   onChange={this.onChange}
                                   autoComplete="on"
                                   value={this.state.state}
                                   onBlur={(e) => e.target.placeholder = "Province"}
                                   onFocus={(e) => e.target.placeholder = ""}
                                   className={"block mt-3 info-login-input"}/>
                        </div>
                    </Row>
                    <Row>
                        <div className={"col-12 mt-3"}>
                                <textarea name={"address"}
                                          value={this.state.address}
                                          onChange={this.onChange}
                                          autoComplete={"on"}
                                          placeholder={"address"}
                                          onBlur={(e) => e.target.placeholder = "address"}
                                          onFocus={(e) => e.target.placeholder = ""}/>
                        </div>
                    </Row>
                    <Row>
                        <div className={"col-12 d-none"}>
                            <input

                                name={"identityType"}
                                type={"text"}
                                onChange={this.onChange}
                                value={this.state.identityType}
                                className={"info-login-input"}/>
                        </div>
                    </Row>
                 
                    <div className="row justify-content-center my-3 ">
                        <div className="col-12 mx-auto send-register-btn">
                            <button type="submit" >SignUp</button>
                        </div>
                    </div>
                </form>
            </div>
        );
    }
}

const mapStateToProps = (state) => ({
    isAuthenticated: state.isAuthenticated,
    error: state.error,
    user : state.auth,

})
export default connect(mapStateToProps, {register})(RegisterMain);

这是我这两个步骤的路线：

    const InitialState = {
    identityType: "Person",
    firstName: "",
    lastName: "",
    phoneNumber: "",
    state: "",
    city: "",
    address: ""
};

export const RegisterOrg = () => {
    const {path} = useRouteMatch();
    const [formState, setFormState] = useState(InitialState);
    const handleChange = useCallback(values => setFormState(values), []);

    return (
        <Switch>
            <Route path={`${path}/step-one`}>
                <Register values={formState} onChange={handleChange} />
            </Route>
            <Route path={`${path}/step-two`}>
                <CheckCode values={formState} onChange={handleChange} />
            </Route>
        </Switch>
    );
}

道具InitialState在两个组件中，当我更改输入值时发送成功，但道具不会更改以进入最后一步。

标签： reactjsreact-reduxreact-router

Answer 1

上述代码中缺少的三件事是：

1. 内部没有状态RegisterMain
2. 你还没有分享register行动，所以，我会提供解决方案 wrt onChange
3. 这行代码有问题，<RegisterMain props={this.props.values} onChange={this.props.handleChange}/>你在传递onChange和引用handleChange. 为了避免这种情况，你可以喜欢这个<RegisterMain {...this.props} />

我已尝试简化您的问题陈述，如果有帮助，请告诉我。解决方案来了。

import React, { Component } from "react";
import { Row } from "react-bootstrap";

class RegisterMain extends Component {
  constructor(props) {
    super(props);
    this.onSubmit = this.onSubmit.bind(this);
    this.onChange = this.onChange.bind(this);
    this.state = {
      lastName: "",
      firstName: "",
      phoneNumber: "",
      address: "",
      state: "",
      city: "",
    };
  }

  onSubmit = (e) => {
    e.preventDefault();
    const {
      firstName,
      lastName,
      phoneNumber,
      address,
      state,
      city,
    } = this.state;
    const newUser = {
      firstName,
      lastName,
      phoneNumber,
      address,
      state,
      city,
    };
    this.props.onChange(newUser);
    console.log(newUser);
  };
  onChange(event) {
    const value = event.target.value;
    this.setState({
      [event.target.name]: value,
    });
  }

  render() {
    return (
      <div className="register-form-box">
        <form className="login-form pt-2 float-right" onSubmit={this.onSubmit}>
          <Row>
            <div className={"col-12 col-lg-6"}>
              <input
                type={"text"}
                placeholder={"Last Name"}
                name={"lastName"}
                onChange={this.onChange}
                autoComplete="on"
                value={this.state.lastName}
                onBlur={(e) => (e.target.placeholder = "Last Name")}
                onFocus={(e) => (e.target.placeholder = "")}
                className={" info-login-input"}
              />
            </div>
            <div className={"col-12 col-lg-6"}>
              <input
                name={"firstName"}
                type={"text"}
                placeholder={"First Name"}
                onChange={this.onChange}
                autoComplete="on"
                value={this.state.firstName}
                onBlur={(e) => (e.target.placeholder = "First Name")}
                onFocus={(e) => (e.target.placeholder = "")}
                className={"info-login-input"}
              />
            </div>
          </Row>
          <Row>
            <div className="col-12">
              <input
                type={"text"}
                placeholder={"Phone"}
                name={"phoneNumber"}
                onChange={this.onChange}
                autoComplete="on"
                value={this.state.phoneNumber}
                onBlur={(e) => (e.target.placeholder = "Phone")}
                onFocus={(e) => (e.target.placeholder = "")}
                className={" mt-3 info-login-input"}
              />
            </div>
          </Row>
          <Row>
            <div className="col-lg-6 col-12 ">
              <input
                type={"text"}
                placeholder={"City"}
                name={"city"}
                onChange={this.onChange}
                autoComplete="on"
                value={this.state.city}
                onBlur={(e) => (e.target.placeholder = "City")}
                onFocus={(e) => (e.target.placeholder = "")}
                className={"block mt-3 info-login-input"}
              />
            </div>
            <div className="col-lg-6 col-12">
              <input
                type={"text"}
                placeholder={"Province"}
                name={"state"}
                onChange={this.onChange}
                autoComplete="on"
                value={this.state.state}
                onBlur={(e) => (e.target.placeholder = "Province")}
                onFocus={(e) => (e.target.placeholder = "")}
                className={"block mt-3 info-login-input"}
              />
            </div>
          </Row>
          <Row>
            <div className={"col-12 mt-3"}>
              <textarea
                name={"address"}
                value={this.state.address}
                onChange={this.onChange}
                autoComplete={"on"}
                placeholder={"address"}
                onBlur={(e) => (e.target.placeholder = "address")}
                onFocus={(e) => (e.target.placeholder = "")}
              />
            </div>
          </Row>
          <Row>
            <div className={"col-12 d-none"}>
              <input
                name={"identityType"}
                type={"text"}
                onChange={this.onChange}
                value={this.state.identityType}
                className={"info-login-input"}
              />
            </div>
          </Row>

          <div className="row justify-content-center my-3 ">
            <div className="col-12 mx-auto send-register-btn">
              <button type="submit">SignUp</button>
            </div>
          </div>
        </form>
      </div>
    );
  }
}

export default RegisterMain;

import React, { Component, useCallback, useState } from "react";
import RegisterMain from "./RegisterMain";

class Register extends Component {
  render() {
    return (
      <div className={""}>
        <div className="row register-row-edit">
          <div className={"col-lg-6 col-12"}>{/* <RegisterGif/> */}test</div>

          <div className={"col-lg-6 col-12 mt-5"}>
            <RegisterMain {...this.props} />
          </div>
        </div>
      </div>
    );
  }
}

export default Register;

const InitialState = {
  identityType: "Person",
  firstName: "",
  lastName: "",
  phoneNumber: "",
  state: "",
  city: "",
  address: "",
};

export const RegisterOrg = () => {
  //   const { path } = useRouteMatch();
  const [formState, setFormState] = useState(InitialState);
  console.log(formState);
  const handleChange = useCallback((values) => setFormState(values), []);

  return <Register values={formState} onChange={handleChange} />;
};