Question

我觉得有一个更简单的方法可以完成所有这些操作。在用户单击state之后，我试图将所有Child变量从Parent传递到Submit 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)
    ...
};

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

Answer 1

为此，您需要在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;

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

1 个答案: