使用 React 将状态变量从子级传递到父级

Question

我觉得有一种更简单的方法可以做到这一切。在用户单击 Submit button 后，我试图将所有 state 变量从 Child 传递到 Parent。有人可以指出我做错了什么吗？

AddSeanceForm.js（儿童）

class AddSeanceForm extends React.Component{
    constructor(...args) {
       super(...args);
        this.state = {
           devices: "",
           interval: ""
        };
       this.handleChange = this.handleChange.bind(this);
       this.onSelect = this.onSelect.bind(this);
    }

    render() {
        return (
            ...
            <form onSubmit={(event, devices, interval) => this.props.handleSubmit(event, this.state.devices, this.state.interval)}>
            ...)

SeanceManager.js（父级）

handleSubmit = (event, devices, interval) => {
    event.preventDefault();
    console.log(devices, interval)
    ...
};

这个解决方案有效，但我打算制作更多变量，这似乎不是最佳选择。

Answer 1

为此，您需要在 Parent 组件中定义事件处理程序，并将其作为道具传递给 Child。该事件处理程序将绑定到您的 Parent 组件的执行上下文。此外，在您的 parent 组件中，您可以启动一个空的 state-variable，然后在执行 [=26] 时将 Child 组件中的数据简单地传播 {...obj} =].

如果您需要，这里还有代码沙箱：https://codesandbox.io/s/zxl2owp2np

Parent:

import React from "react";
import Child from "./Child";

class App extends React.Component {
  state = {};

  updateState = obj => {
    this.setState({ ...obj }, () => console.log(this.state));
  };

  render() {
    return (
      <div className="App">
        <Child updateParent={this.updateState} />
      </div>
    );
  }
}

Child:

import React from "react";

class Child extends React.Component {
  state = {
    name: "",
    age: 0
  };

  handleOnSubmit = () => {
    event.preventDefault();
    const childState = this.state;
    this.props.updateParent(childState);
  };

  handleOnChange = event => {
    this.setState({
      [event.target.name]: event.target.value
    });
  };
  render() {
    return (
      <form onSubmit={this.handleOnSubmit}>
        <input
          name="name"
          value={this.state.name}
          onChange={this.handleOnChange}
        />
        <input
          name="age"
          value={this.state.age}
          onChange={this.handleOnChange}
        />
        <button type="submit">Submit</button>
      </form>
    );
  }
}

export default Child;

使用 React 将状态变量从子级传递到父级

Passing state variables from Child To Parent using React

forms

submit

reactjs