使用另一个无状态组件的props更新组件状态

Question

我想在我的无状态组件"InputRetro"中更新我的有状态组件"LoginForm"的状态。我不知道实现它的正确方法。请帮助我。

"登录表单"组件代码：

import React, { Component } from 'react';
import './LoginForm.css';
import InputRetro from './InputRetro';
class LoginForm extends Component {
state = {
loginData : {
username : null,
password : null,
},
inputs : [
{ id : 'username', label : 'Username', type : 'text' },
{ id : 'password', label : 'Password', type : 'password' },
],
}
inputsJSX = this.state.inputs.map(input => {
return (
<InputRetro id={input.id} label={input.label} type={input.type} key={input.id} />
);
});
handleLogin = e => {
e.preventDefault();
// blank function.
}
render() {
return (
<form className='login-form' onSubmit={this.handleLogin}>
{ this.inputsJSX }
</form>
);
}
}
export default LoginForm;

"InputRetro"组件代码：

import React from 'react';
import './InputRetro.css';
let InputRetro = props => {
const { id, label, type, placeholder } = props;
return (
<div className='InputRetro'>
<label>{label}</label>
<input id={id} type={type} placeholder={placeholder} />
</div>
);
}
export default InputRetro;

我想使用onChange或onKeyUp更新"InputRetro"组件内部的"LoginForm"组件的状态值。当"InputRetron"组件的输入标记值更改时，我想更改的状态值为state.loginData.username和state.loginData.password。

更多详细信息：

state.loginData.username值将存储"InputRetro"组件的输入标记的值，该标记的id为带有onChange或onKeyUp事件的username。在state.loginData.password.中相同

Answer 1

您可以将回调函数从父组件(LoginForm(传递到子组件(Input Retro(，然后单击按钮在子组件中触发该操作。

登录窗体.js

import React, { Component } from 'react';
import './LoginForm.css';
import InputRetro from './InputRetro';
class LoginForm extends Component {
state = {
loginData : {
username : null,
password : null,
},
inputs : [
{ id : 'username', label : 'Username', type : 'text' },
{ id : 'password', label : 'Password', type : 'password' },
],
}

const ChangeState = (childData, flag) => {
flag === 1 ? state.loginData.username = childData : state.loginData.password = childData
}
inputsJSX = this.state.inputs.map(input => {
return (
<InputRetro id={input.id} label={input.label} type={input.type} callBackHandler={ChangeState} key={input.id} />
);
});
handleLogin = e => {
e.preventDefault();
// blank function.
}
render() {
return (
<form className='login-form' onSubmit={this.handleLogin}>
{ this.inputsJSX }
</form>
);
}
}
export default LoginForm;

在子组件中，您可以随时调用回调函数。

InputRetro.js

import React from 'react';
import './InputRetro.css';
let InputRetro = props => {
const { id, label, type, placeholder, callBackHandler } = props;
const handleClick = (event) => {
label === 'email' ? callBackHandler(event.target.value, 1) : callBackHandler(event.target.value, 2)
}
return (
<div className='InputRetro'>
<label>{label}</label>
<input id={id} type={type} placeholder={placeholder} onChange={event => handleClick(event)} />
</div>
);
}
export default InputRetro;