【发布时间】：2020-09-18 03:52:17
【问题描述】：
嘿，我是 React 的菜鸟。这些道具和国家的东西正在吃我的头。无论如何，我的问题是， 我有 3 个组件 “LoginForm”、“InputField”、“SubmitButton”
我需要的是，当单击 SubmitButton 时，我想将“用户名”和“密码”详细信息传递给 SubmitButton 组件。每当输入字段值更改时，我尝试并成功将数据从 InputField 传递到 LoginForm，但无法对“SubmitButton”组件执行相同操作.
在此先感谢 :)
这里的代码如下。
//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;
【问题讨论】：
-
使用一个拥有你想要的数据的主组件，或者使用 redux 在你想要的地方共享数据......
-
我会试试 Redux。希望它有效
-
能否请您解释一下“主要组件”部分？ @BENARDPatrick
标签： javascript node.js reactjs components