将状态传递给父组件

Question

I'm refactoring some code to make a more aesthetically pleasing render of a table. I will link a codesandbox that shows both the old and new implementations.

So if you select the two dropdowns at the top, in the old implementation section when you check one of the boxes next to the fieldName you will see 3 additional input boxes appear; lengthType , size , and maxArrayElements . The change handlers for these are in the main component index.js .

I have since made a separate component TableRowWithCheckbox that introduces some new functionality that uses a checkbox to keep track of what row is selected.

In the new implementation (the table) I have decided to render the 3 inputs mentioned above, inside the table. I'm having trouble keeping track of the inputs since they are now moved inside this new component.

Should I initialize state for lengthType , size, and maxArrayElements inside this new component then have the change handler inside the main component? Or initialize the state values AND have the change handles in the main component?

TableRowWithCheckbox component below.

import React, { Component } from "react";
import { Table, Checkbox, Dropdown, Input } from "semantic-ui-react";

const lengthTypeOptions = [
  { key: "fixed", text: "Fixed", value: "fixed" },
  { key: "variable", text: "Variable", value: "variable" }
];

export default class TableRowWithCheckbox extends Component {
  constructor(props) {
    super(props);
    const { initialState } = this.props;
    this.state = {
      fieldCheckbox: initialState
    };
  }

  checkbox = () => {
    this.setState({ fieldCheckbox: !this.state.fieldCheckbox }, () => {
      console.log("checkbox --> ", this.state.fieldCheckbox);
      const {
        name,
        dataType,
        isArray,
        position,
        box,
        lengthType,
        size,
        maxArrayElements
      } = this.props;
      box({
        name,
        dataType,
        isArray,
        position,
        isChecked: this.state.fieldCheckbox,
        lengthType,
        size,
        maxArrayElements
      });
    });
  };

  render() {
    const {
      name,
      dataType,
      isArray,
      position,
      lengthType,
      size,
      maxArrayElements
    } = this.props;
    const { fieldCheckbox } = this.state;
    return (
      <>
        <Table.Row>
          <Checkbox
            style={{ marginTop: "20px" }}
            checkbox
            onChange={this.checkbox}
          />
          <Table.Cell>{name}</Table.Cell>
          <Table.Cell>{dataType}</Table.Cell>
          <Table.Cell>{JSON.stringify(isArray)}</Table.Cell>
          <Table.Cell>{position}</Table.Cell>
          <Table.Cell>
            <Dropdown
              placeholder="Pick a length Type:"
              clearable
              selection
              search
              fluid
              noResultsMessage="Please search again"
              multiple={false}
              value={this.state.lengthType}
              options={lengthTypeOptions}
              header="CHOOSE A LENGTH TYPE"
              onChange={this.props.updateLengthType}
              required
            />
          </Table.Cell>
          <Table.Cell>
            <Input
              onChange={this.props.onSizeChange}
              type="number"
              name="size"
              min="1"
              placeholder="1"
              required
            />
          </Table.Cell>
          <Table.Cell>
            <Input
              onChange={this.props.onChangeMaxArrayElements}
              type="number"
              name="maxArrayElements"
              placeholder="1"
              min="1"
              max="100"
              required
            />
          </Table.Cell>
        </Table.Row>
      </>
    );
  }
}

Codesandbox link here

Answer 1

The convention for passing state to a parent is via callback methods. The parent should pass the child a function to call when there is something to update; and the parameters passed into the function would be ones you want to set in the parent state. That way the parent's method would just need to call this.setState() with the params coming into the function.

Answer 2

In React, idea is to lift your state up where you will actually modify it. So in your case, it makes sense to have your state and change handlers both inside of your main component.

Answer 3

Pass a function as prop to your component, and give your input the same names as in the parent state.

onChange = (e) => {
  this.setState({
    [e.target.name]: e.target.value
  })
}

Use the function in your inputs

<input onChange={this.props.onChange} ... />