将数据从子组件传递到父组件 - Javascript

在React中，数据流是单向的，从父组件传递到子组件。但有时，我们需要将数据从子组件传递回父组件。这样做会导致代码变得复杂，但是在很多情况下这是必要的。

在子组件中传递数据到父组件

我们可以通过回调函数将数据从子组件传递到父组件。下面是一个简单的示例：

class ChildComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = { childData: "" };
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(event) {
        this.props.handleCallback(event.target.value);
        this.setState({ childData: event.target.value });
    }

    render() {
        return (
            <div>
                <input
                    type="text"
                    value={this.state.childData}
                    onChange={this.handleChange}
                />
            </div>
        );
    }
}

class ParentComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = { parentData: "" };
        this.handleCallback = this.handleCallback.bind(this);
    }

    handleCallback(data) {
        this.setState({ parentData: data });
    }

    render() {
        return (
            <div>
                <ChildComponent handleCallback={this.handleCallback} />
                <p>Parent Data: {this.state.parentData}</p>
            </div>
        );
    }
}

这里，在子组件中，我们有一个handleChange事件拦截子组件的输入，并将其存储在组件的state变量中。同时，我们将回调函数传递给子组件，用来改变父组件的state。

在父组件中，我们有一个handleCallback事件，用来更新父组件的state。我们将这个函数传递给子组件，这样它就可以使用它来回传数据到父组件。

我们使用这两个组件，处理用户输入数据，并在父组件显示。这种方法是适用于大多数的情况，因为任何更改都可以在回调函数中执行，但是在复杂的组件通信中，这种方法可能不太适用。

使用Redux

在应用中使用Redux可以使组件间数据传递变得更加容易。下面是一个简单的示例：

import { createStore } from "redux";

const reducer = (state = {}, action) => {
    switch (action.type) {
        case "CHILD_CHANGED":
            return { ...state, parentData: action.parentData };
        default:
            return state;
    }
};

const store = createStore(reducer);

class ChildComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = { childData: "" };
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(event) {
        store.dispatch({
            type: "CHILD_CHANGED",
            parentData: event.target.value,
        });
        this.setState({ childData: event.target.value });
    }

    render() {
        return (
            <div>
                <input
                    type="text"
                    value={this.state.childData}
                    onChange={this.handleChange}
                />
            </div>
        );
    }
}

class ParentComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = { parentData: "" };
        this.handleCallback = this.handleCallback.bind(this);
    }

    componentDidMount() {
        store.subscribe(() => this.forceUpdate());
    }

    handleCallback(data) {
        this.setState({ parentData: data });
    }

    render() {
        const state = store.getState();
        return (
            <div>
                <ChildComponent />
                <p>Parent Data: {state.parentData}</p>
            </div>
        );
    }
}

在这个示例中，我们使用了Redux的状态管理模式，在父组件和子组件之间共享数据。我们存储数据在Redux的状态存储器中，然后在所需的地方读取数据。

子组件中，我们监听刚刚介绍的事件，当数据发生变化时，使用Redux store的dispatch函数来向状态存储器发出一个动作。然后，我们通过setState函数将数据保存在子组件的state中。

在父组件中，我们通过store.subscribe（）函数注册了一个回调函数，当state更新时，强制父组件更新。我们将数据从Redux存储中读取，并将其传递给子组件，并在父组件中显示状态。这是一种强大且灵活的方法，可以帮助应用程序无缝地进行组件间通信，但这需要一些React和Redux的知识。

结论

在React中，数据流是从父组件到子组件的单向数据流。但是在某些情况下，我们需要从子组件向父组件传递数据。上述两种方法都是有效的，但它们各自有不同的使用场景。第一个方法是简单的回调函数，适用于大多数场景。第二个方法使用了Redux，专门用于处理状态管理。这需要更多的配置和使用知识，但它为处理复杂应用程序代码提供了更多的灵活性和功能。

以上就是如何在Javascript中将数据从子组件传递到父组件的介绍。