Question

我看过一些示例，这些示例显示了如何通过子组件上的onClick on onChange事件将道具从子代传递给父代，但正在努力弄清楚如何被动地传递道具。

我想要的是让子组件执行获取操作，然后将响应传递给父组件。

// PARENT component
class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            username: '',
            homeLink: 'inital'
        }
    }

    handleNamechange(newName) {
        this.setState({
            homeLink: newName
        })
    }

    render() {

        return(
            <section>
                <h1>{this.state.homeLink}</h1>

                <GetUserComponent 
                    changeLink={this.handleNamechange.bind(this)}
                />

            </section>
        )
    }
}
export default App;

而我苦苦挣扎的部分是在没有onClick的情况下将道具发送给父对象，并在获取完成后立即传递道具

// CHILD Component
class GetUserComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            username: '',
            homeLink: 'xxxx'
        }
    }

    componentDidMount() {
        fetch('https://someapi/getusername', {

        })
        .then(function(response) { 
            return response.json() 
        })
        .then((data) => {
            this.setState(
                { username: data }
            )
        })
    }

    onChangeLink() {
        this.props.changeLink(this.state.homeLink)
    }

    render() {
        return (
            <div>
                <span onClick={this.onChangeLink.bind(this)}
                    >Change Header Link</span>
            </div>
        )
    }

}

export default GetUserComponent;

我不确定我是在做错什么，还是根本无法做到这一点，您必须使用click事件，但是无论哪种方式都将非常感谢您的帮助。

Answer 1

您必须调用Parents函数：

eval

然后它将执行componentDidMount() { fetch('https://someapi/getusername', { }) .then(function(response) { return response.json() }) .then((data) => { this.props.changeLink(data); }) }函数并更新父状态。

Answer 2

在您的情况下，我认为父母必须进行提取，并将结果作为道具提供给孩子。

如果您确实需要子代获取数据，则必须调用作为道具从父母到子代提供的回调changeLink：

componentDidMount() {
    fetch('https://someapi/getusername', {

    })
    .then(function(response) { 
        return response.json() 
    })
    .then((data) => {
        this.setState(
            { username: data }
        )
        this.props.changeLink(data)
    })
}

有没有一种方法可以将道具从孩子传递到父母而无需onClick

2 个答案: