在另一个组件发送后如何传递文本值?

Question

我创建了两步注册页面。第一步从用户获取数据，如姓名，姓氏，电话号码。我需要将电话号码的值传递到最后一步来检查验证码是否正确。提交到上一步状态后如何传递电话号码?这是我的第一步代码:

class RegisterMain extends Component {
constructor(props) {
super(props);
this.state = {
firstName: "",
lastName: "",
phoneNumber: "",
state: "",
city: "",
address: ""
}
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);

这是我最后一步代码:

class CheckCodeMain extends Component {
constructor(props) {
super(props);
this.state = {
phoneNumber: ""
}
}
handleParentData = (formModel) => {
console.log(formModel);
this.setState({ ...formModel })
}

state = {
verificationCode: "",
msg: null
}
static propTypes = {
isAuthenticated: PropTypes.bool,
error: PropTypes.object.isRequired,
verifyCode: PropTypes.func.isRequired,
register: PropTypes.func.isRequired,
clearError: PropTypes.func.isRequired
};

onSubmit = (e) => {
e.preventDefault();
const {verificationCode} = this.state;
const user = {
verificationCode
};
this.props.verificationCode(user);
console.log(verifyCode)
}
handleChange = verificationCode => this.setState({verificationCode});
render() {

return (
<div className="register-form-box check-code-wrapper">
<div className="register-title-box">
<h3>
Check Code
</h3>

</div>
<div className={"otp-code-verif-inputs"}>
<form onSubmit={this.onSubmit}>
<OtpInput
value={this.state.verificationCode}
onChange={this.handleChange}
numInputs={5}
/>
<input
value={this.state.phoneNumber}
/>
<div className={"approve-btn-check"}>
<button onSubmit={this.onSubmit} className={"otp-code-next-step"}> Submit
</button>
</div>
</form>
</div>

</div>
);
}
}
const mapStateToProps = (state) => ({
isAuthenticated: state.isAuthenticated,
verifyCode: state.verifyCode,
error: state.error,
register : state.register,
auth: state.auth,
});
export default connect(mapStateToProps, {
verifyCode, clearError, loadUser, register
})(CheckCodeMain);

这是我的注册操作，我在这个项目中使用redux:

export const register = ({
firstName,
lastName,
phoneNumber,
address,
state,
identityType,
city
}) => (dispatch) => {
const config = {
headers: {
"Content-Type": "application/json",
},
};
const body = JSON.stringify({
firstName,
lastName,
phoneNumber,
address,
identityType,
state,
city
});
axios.post("/users/register",  body, config).then(
(res) =>
dispatch({
type: REGISTER_SUCCESS,
payload: res.data,
}),
) .then(
() => {
history.push({
pathname: '/check-code',
state
})
}
).catch((err) => {
dispatch(
returnError(err.response, err.res)
);
dispatch({
type: REGISTER_FAIL
});
});
}

这是我的路由组件，并将存储设置为我的提供商:

import {createBrowserHistory} from "history";

export const history = createBrowserHistory();
const AppRouter = (props) => (
<BrowserRouter>
<div className="App">
<Router history={history} >
<Navigation/>
<Switch>
<Route path="/" exact component={() => <Home/>}/>
<Route path={"/login-preview"} exact component={() => <LoginPreview/>}/>
<Route path={"/profile"} exact component={() => <Profile/>}/>
<Route path={"/register"} exact component={() => <Register />}/>
<Route path={"/check-code"}   component={() => <CheckCode />}/>
<Route path={"/login"} exact component={() => <Login/>}/>
</Switch>
<Footer/>
</Router>
</div>
</BrowserRouter>
);
export default AppRouter;

我试图通过历史状态。在最后一个组件中Push但是什么都不给。我的react-router-dom版本是5.2.0，历史记录版本是5.0.0。

Answer 1

通常的方法是创建一个有状态组件来呈现两个路由并保持各个步骤的共享状态:

const InitialState = {
firstName: "",
lastName: "",
phoneNumber: "",
state: "",
city: "",
address: ""
};
const Register = () => {
const {path} = useRouteMatch();
const [formState, setFormState] = useState(InitialState);
const handleChange = useCallback(values => setFormState(values), []);
return (
<Switch>
<Route exact path={`${path}/form`}>
<RegisterMain values={formState} onChange={handleChange} />
</Route>
<Route exact path={`${path}/confirm`}>
<CheckCodeMain values={formState} onChange={handleChange} />
</Route>
</Switch>
);
}

在您的个人步骤中，您可以调用onChange处理程序来存储父状态中的当前值，并重定向到下一步路由。

Register组件可以像您的AppRouter:

那样呈现

<Route path="/register" component={Register} />