且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

从子组件React js更改父级状态

更新时间:2022-12-16 14:07:09

您需要更新父对象中的数据,并让React处理子更新本身。这样的示例如下:

You need to update the data in the parent object and let React handle the child updates itself. An example of how that would look is:

class ParentComponent extends React.Component {
    onChangeValue = (index, newData) => {
        let data = this.state.data;
        data[index] = newData;

        this.setState({ data });
    }

    render() {
        let outs = [];

        for (let i = 0; i < 10; i++) {
            let row = this.state.data[i];

            outs.push(
                <ChildComponent index={ i } row={ row } onChangeValue={ this.onChangeValue }/>
            );
        }

        return <div>{ outs }</div>;
    }
}

class ChildComponent extends React.Component {
    ...

    onChangeValue() {
        const { index, onChangeValue } = this.props;
        this.props.onChangeValue(index, { someNewValue });
    }
}

当您想要更新孩子的某些东西时,您会调用其 onChangeValue 方法,该方法又调用父级的 onChangeValue

when you want to update something in the child, you'd call its onChangeValue method which, in turn, calls the parent's onChangeValue.