如何在反应中从子组件中获得值？
如何在反应中从子组件中获得值？
提问于 2018-12-12 11:38:16
我创建了一个InputComponent，我想在其他组件中导入这个组件并提交，但是我做不到。如何从FormComponent中的子组件中获得值
InputComponent.js
import React, {Component} from 'react';
class InputComponent extends Component {
constructor(props) {
super(props);
this.state = { currentVal: null }
}
render() {
return (
<div>
<input
value={this.state.currentVal}
onChange={(event) => this.setState({currentVal:event.target.value })}
/>
</div>
);
}
}
export default InputComponent;FormComponent.js
import React,{Component} from 'react';
import InputComponent from '../../components/common/InputComponent';
class FormComponent extends Component {
constructor(props) {
super(props);
this.state = { }
}
CallSubmit= (event) => {
// how can get username and password ?
event.preventDefault();
console.log(event.target.vale)
}
render() {
return (
<div style={{width:100, height:500, marginTop:100}}>
<form onSubmit={ this.CallSubmit }>
<InputComponent name="username" />
<InputComponent name="password" />
<button>Send it</button>
</form>
</div>
);
}
}
export default FormComponent;回答 3
Stack Overflow用户
回答已采纳
发布于 2018-12-12 11:59:48
您可以在子组件上创建一个onChange操作，例如，下面是您的FormComponent:创建此函数以处理更改：
onChangeUsername(username){
this.setState({username})
}将道具传递给子组件：
<InputComponent name="username" onChange = {this.onChangeUsername} />在子组件(InputComponent)中，您可以访问这个道具并将数据传递给它：
this.props.onChange(event.target.value)Stack Overflow用户
发布于 2018-12-12 11:40:40
在父组件中移动onChange函数，并在FormComponent组件中存储用户名和密码
Stack Overflow用户
发布于 2018-12-12 11:58:24
在React中，数据流单向，从父到子。
因此，您需要在FormComponent上拥有输入的实际状态，并将它们作为道具传递给InputComponent，以及在FormComponent处理它的函数。
<div>
<InputComponent
input={this.state.username}
onChange={this.handleInputChange}
/>
<InputComponent
input={this.state.password}
onChange={this.handleInputChange}
/>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53742222
复制相关文章
相似问题
腾讯云开发者
