Question

我正在重构一些代码，以使表格的外观更加美观。我将链接一个显示旧的和新的实现的codeandbox。

因此，如果您选择顶部的两个下拉菜单，则在旧的实现部分中，选中fieldName旁边的框之一，您会看到另外三个输入框出现； lengthType，size和maxArrayElements。这些更改的处理程序位于主要组件index.js中。

此后，我制作了一个单独的组件TableRowWithCheckbox，该组件引入了一些新功能，这些功能使用复选框来跟踪选定的行。

在新的实现（表）中，我决定在表内部呈现上述3个输入。我很难跟踪输入内容，因为它们现在已在新组件中移动了。

我应该在这个新组件中初始化lengthType，size,和maxArrayElements的状态，然后在主组件中包含更改处理程序吗？还是初始化状态值并在主要组件中具有更改句柄？

TableRowWithCheckbox组件。

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

将状态传递给父级的约定是通过回调方法。当有事情要更新时，父母应该给孩子传递一个要调用的函数。并且传递给函数的参数将是您要在父状态下设置的参数。这样，父方法只需要在函数进入参数的情况下调用this.setState（）即可。

Answer 2

在React中，想法是提升您的状态，直到您实际对其进行修改。因此，在您的情况下，在主组件中同时包含状态和更改处理程序是很有意义的。

Answer 3

将函数作为prop传递给组件，并为输入提供与父状态相同的名称。

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

在输入中使用该功能

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

将状态传递给父组件

3 个答案: