时间戳

首页 > 解决方案 > 使用 React 将状态变量从子级传递给父级

reactjs - 使用 React 将状态变量从子级传递给父级

问题描述

我觉得有一种更简单的方法可以做到这一切。在用户state单击. _ 有人可以指出我做错了什么吗？ChildParentSubmit button

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

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

标签： reactjsformssubmit

解决方案

为此，您需要在 Parent 组件中定义事件处理程序并将其作为 prop 传递给 Child。该事件处理程序将绑定到您的父组件的执行上下文。此外，在您的父组件中，您可以启动一个空状态变量，然后在执行事件处理程序时简单地将子组件中的数据传播 {...obj} 到其中。

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

家长：

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

孩子：

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;

推荐阅读