react.js - 父组件获取子组件(input) value 问题
本文介绍了react.js - 父组件获取子组件(input) value 问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
export default class SignUp extends Component {
constructor(props) {
super(props);
this.state = {
value: ''
}
}
transferValue(val) {
setState({
value: val
})
}
render() {
return (
<Form>
<Input dataValue={this.state.value} transferValue={val => this.transferValue(val)} id="formCaptcha" type="text" />
<Input dataValue={this.state.value} transferValue={val => this.transferValue(val)} id="formCaptcha" type="text" />
<Input dataValue={this.state.value} transferValue={val => this.transferValue(val)} id="formCaptcha" type="text" />
</Form>
)
}
}
export class Input extends Component {
handleChange(event) {
this.setState({
value: event.target.value
});
this.props.transferValue(event.target.value)
}
render() {
const {
id,
type,
style,
...other
} = this.props;
return (
<div>
<input ref={id} type={type} value={this.state.value} onChange={() => this.handleChange(event)} />
</div>
)
}
}
export class Form extends Component {
render() {
for (let item of this.props.children) {
//在这获取Inpuo的value
console.log(item)
}
return (
<form>
{this.props.children}
</form>
)
}
}
解决方案
其实你代码结构写的有问题,既然你需要form
获取数据,为啥不直接用SignUp
来控制数据?
export default class SignUp extends Component {
constructor(props) {
super(props);
this.state = {
values: {}
}
}
transferValue(event, key) {
let values = {...this.state.values};
values[key] = event.target.value;
this.setState({ values });
}
render() {
const values = this.state.values;
return (
<Form values={values}>
<Input dataValue={values['key1']} handleChange={event => this.transferValue(event, 'key1')} type="text" />
<Input dataValue={values['key2']} handleChange={event => this.transferValue(event, 'key2')} type="text" />
<Input dataValue={values['key3']} handleChange={event=> this.transferValue(event, 'key3')} type="text" />
</Form>
)
}
}
export class Input extends Component {
render() {
const { dataValue, handleChange, type } = this.props;
return (
<div>
<input type={type} value={dataValue} onChange={handleChange} />
</div>
)
}
}
export class Form extends Component {
render() {
for (let item of this.props.values) {
//在这获取Inpuo的value
console.log(item)
}
return (
<form>
{this.props.children}
</form>
)
}
}
这篇关于react.js - 父组件获取子组件(input) value 问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文