1 Câu hỏi: Truyền các biến trạng thái từ Con sang Cha mẹ bằng React

câu hỏi được tạo ra tại Thu, May 9, 2019 12:00 AM

Tôi cảm thấy như có một cách dễ dàng hơn để làm tất cả điều này. Tôi đang cố gắng chuyển tất cả các biến state từ Child đến Parent sau khi người dùng đã nhấp vào Submit button. Ai đó có thể vui lòng chỉ ra những gì tôi đang làm sai không?

AddSeanceForm.js (Trẻ em)

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 (Phụ huynh)

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

Giải pháp này hoạt động, nhưng tôi đang lên kế hoạch tạo ra nhiều biến hơn và điều này có vẻ không tối ưu.

    
0
  1. Xin chào kataroty! Chỉ cần viết cho bạn một câu trả lời, cho tôi biết nếu điều đó hữu ích cho bạn.
    2019-05-09 18: 42: 13Z
1 Đáp án                              1                         

Để thực hiện việc này, bạn cần xác định trình xử lý sự kiện bên trong thành phần Parent và chuyển nó xuống dưới dạng chỗ dựa cho Child. Trình xử lý sự kiện đó sẽ được liên kết với bối cảnh thực hiện của thành phần Cha mẹ của bạn. Ngoài ra, trong thành phần cha mẹ của bạn, bạn có thể khởi tạo một biến trạng thái trống, sau đó chỉ cần truyền {... obj} dữ liệu từ thành phần Con vào nó khi bạn thực thi trình xử lý sự kiện.

Đây cũng là hộp cát mã nếu bạn cần: https://codesandbox.io/s/zxl2owp2np

Phụ huynh:

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

Con:

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;
    
1
2019-05-09 18: 38: 05Z
  1. Cảm ơn bạn vì câu trả lời này, Nó thực sự hoạt động theo cách này nhưng tôi đã tìm kiếm thứ gì đó thậm chí còn đơn giản hơn. Nhưng điều này sẽ làm. Cảm ơn bạn.
    2019-05-09 19: 01: 18Z
  2. Bạn được chào đón @kataroty! Vui mừng điều này đã giúp! Tôi sẽ rất vui mừng khi tìm thấy một giải pháp thậm chí đơn giản hơn cho vấn đề này! Tôi nghĩ rằng điều này sẽ hoạt động tốt chỉ cho nhu cầu mở rộng hiện tại của chúng tôi.
    2019-05-09 19: 12: 01Z
nguồn đặt đây