父组件获取子组件(input) value 问题

Question

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>
        )
    }
}

Answer 1

其实你代码结构写的有问题，既然你需要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>
        )
    }
}

Answer 2

使用React.cloneElement(el, props, children)，在props中把属性和回调函数传递给子组件:

render() {
  return (
    <form>
      { this.cloneElement(this.props.children, {transferValue: this.handleChange}) }
    </form>
  )
)

以上示例用于单个子组件