如何在三个组件之间传递数据？
如何在三个组件之间传递数据？
提问于 2020-05-30 16:13:29
嘿，我的反应很好。这些道具和国家的东西让我头疼。无论如何，我的问题是，我有3个Componenet "LoginForm“、"InputField”、"SubmitButton"
我需要的是，当 SubmitButton 组件单击SubmitButton时，我希望将“用户名”和“密码”详细信息传递给SubmitButton。每当输入字段值发生变化时，我尝试并成功地将数据从"SubmitButton“inputfield 传递到LoginForm，但无法对组件执行相同的操作。
(预先谢谢:)
代码如下所示。
//LOGING FORM COMPONENT
class LoginForm extends React.Component {
eventHandler = function (data) {
console.log(data)
}
render() {
return (
<div>
<InputField onChange={this.eventHandler}/>
<SubmitButton/>
</div>
)
}
}
export default LoginForm;
//INPUT FIELD COMPONENT
class InputField extends React.Component {
constructor(props){
super(props);
this.state={
username:'',
password:''
};
this.handleChange=this.handleChange.bind(this)
}
handleChange = e => {
this.setState({ [e.target.name]: e.target.value }, () => {
if (this.props.onChange) {
this.props.onChange(this.state);
}
})
};
render() {
return (
<div>
<div>
<input name='username' onChange={this.handleChange}></input>
</div>
<div>
<input name='password' type='password' onChange={this.handleChange}></input>
</div>
</div>
)
}
}
export default InputField;
//SUBMIT BUTTON COMPONENT
class Submit_Button extends React.Component {
constructor(props){
super(props);
this.loginBtn=this.loginBtn.bind(this)
}
loginBtn = function (data) {
//Empty Because, dont know what to code xD
}
render() {
return (
<div>
<button onClick={this.loginBtn}>
Login</button>
<svg class="bi bi-person" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M13 14s1 0 1-1-1-4-6-4-6 3-6 4 1 1 1 1h10zm-9.995-.944v-.002.002zM3.022 13h9.956a.274.274 0 00.014-.002l.008-.002c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664a1.05 1.05 0 00.022.004zm9.974.056v-.002.002zM8 7a2 2 0 100-4 2 2 0 000 4zm3-2a3 3 0 11-6 0 3 3 0 016 0z" clip-rule="evenodd" />
</svg>
</div>
)
}
}
export default Submit_Button;解决了
class LoginForm extends React.Component {
constructor(props){
super(props);
this.state={
username:'',
password:''
};
}
eventHandler = (data) =>{
console.log(data)
this.setState({
username:data.username,
password:data.password
},
console.log(this.state.username))
}
render() {
return (
<div>
<InputField onChange={this.eventHandler}/>
<SubmitButton username={this.state.username} password={this.state.password}/>
</div>
)
}
}
export default LoginForm;
class InputField extends React.Component {
constructor(props){
super(props);
this.state={
username:'',
password:''
};
this.handleChange=this.handleChange.bind(this)
}
handleChange = e => {
this.setState({ [e.target.name]: e.target.value }, () => {
if (this.props.onChange) {
this.props.onChange(this.state);
}
},
)
};
render() {
return (
<div>
<div>
<input name='username' onChange={this.handleChange}></input>
</div>
<div>
<input name='password' type='password' onChange={this.handleChange}></input>
</div>
</div>
)
}
}
export default InputField;
class Submit_Button extends React.Component {
constructor(props){
super(props);
this.loginBtn=this.loginBtn.bind(this)
}
loginBtn = function (data) {
console.log( this.props.username, this.props.password)
}
render() {
return (
<div>
<button onClick={this.loginBtn}>
Login</button>
<svg className="bi bi-person" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd" d="M13 14s1 0 1-1-1-4-6-4-6 3-6 4 1 1 1 1h10zm-9.995-.944v-.002.002zM3.022 13h9.956a.274.274 0 00.014-.002l.008-.002c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664a1.05 1.05 0 00.022.004zm9.974.056v-.002.002zM8 7a2 2 0 100-4 2 2 0 000 4zm3-2a3 3 0 11-6 0 3 3 0 016 0z" clipRule="evenodd" />
</svg>
</div>
)
}
}
export default Submit_Button;回答 1
Stack Overflow用户
回答已采纳
发布于 2020-05-30 16:36:27
基本上，从一个孩子到另一个孩子通过他们的父母传递数据是一个好主意。
在这种情况下，您可以将状态从InputField移动到LoginForm，并通过InputField的支持将输入连接到状态，并使它们成为受控组件。(您可以从here阅读更多关于受控组件的信息)
然后，您可以简单地将数据从LoginForm的状态通过它的支持传递到SubmitButton。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62105241
复制相关文章
相似问题
腾讯云开发者
