Передача переменных состояния от Child to Parent с помощью React - PullRequest
Новая
       20

Передача переменных состояния от Child to Parent с помощью React

0 голосов
/ 09 мая 2019

Я чувствую, что есть более простой способ сделать все это.Я пытаюсь передать все переменные 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)
    ...
};

Это решение работает, но я планирую сделать больше переменных, и это не кажется оптимальным.

1 Ответ

1 голос
/ 09 мая 2019

Для этого вам нужно определить обработчик событий внутри родительского компонента и передать его в качестве опоры дочернему элементу.Этот обработчик событий будет привязан к контексту выполнения вашего родительского компонента.Кроме того, в вашем родительском компоненте вы можете инициировать пустую переменную состояния, а затем просто распространять {... 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;
...