防止父组件状态改变后子状态重置也获取所有子组件的值：ReactJS+ Typescript

Question

我对反应有点陌生，我陷入了这种情况，我正在为反应中的表格实施自定义下拉过滤器。我为每列设置了一组下拉值，并且有一个应用按钮。

我为此维护了一个子组件，它接收下拉值并将选定的值发送回父级。然后我调用一个后端 API，它为我提供过滤数据，而这些数据又设置了 parents state 。这里的问题是在我获取数据并设置父状态后，下拉列表中的复选框值丢失了。

每个子组件都有一组复选框、一个应用和一个清除按钮。因此，单击 Apply 后，我必须将已检查的内容发送给父级或一般情况下已检查的内容，而不会丢失以前的内容。

我无法理解为什么我会丢失复选框值？

如果有人能帮我解决这个问题，那将是非常有帮助的

沙盒：https://codesandbox.io/s/nervous-elgamal-0zztb

我添加了带有适当 cmets 的沙盒链接。请看一看。我有点新反应。

非常感谢您的帮助

家长

import * as React from "react";
import { render } from "react-dom";
import ReactTable from "react-table";
import "./styles.css";
import "react-table/react-table.css";
import Child from "./Child";
interface IState {
  data: {}[];
  columns: {}[];
  selectedValues: {};
  optionsForColumns: {};
}

interface IProps {}

export default class App extends React.Component<IProps, IState> {

  // Here I have  hardcoded the values, but data and optionsForColumns comes from the backend and it is set inside componentDidMount
  constructor(props: any) {
    super(props);
    this.state = {
      data: [
        { firstName: "Jack", status: "Submitted", age: "14" },
        { firstName: "Simon", status: "Pending", age: "15" }
      ],
      selectedValues: {},
      columns: [],
      optionsForColumns: {
        firstName: [{ Jack: "4" }, { Simon: "5" }],
        status: [{ Submitted: "5" }, { Pending: "7" }]
      }
    };
  }

  // Get the values for checkboxes that will be sent to child
  getValuesFromKey = (key: any) => {
    let data: any = this.state.optionsForColumns[key];
    let result = data.map((value: any) => {
      let keys = Object.keys(value);
      return {
        field: keys[0],
        checked: false
      };
    });
    return result;
  };

  // Get the consolidated values from child and then pass it for server side filtering
  handleFilter = (fieldName: any, selectedValue: any, modifiedObj: any) => 
  {
    this.setState(
      {
        selectedValues: {
          ...this.state.selectedValues,
          [fieldName]: selectedValue
        }
      },
      () => this.handleColumnFilter(this.state.selectedValues)
    );
  };

  // Function that will make server call based on the checked values from child
  handleColumnFilter = (values: any) => {
    // server side code for filtering
    // After this checkbox content is lost
  };

  // Function where I configure the columns array for the table . (Also data and column fiter values will be set here, in this case I have hardcoded inside constructor)
  componentDidMount() {
    let columns = [
      {
        Header: () => (
          <div>
            <div>
              <Child
                key="firstName"
                name="firstName"
                options={this.getValuesFromKey("firstName")}
                handleFilter={this.handleFilter}
              />
            </div>
            <span>First Name</span>
          </div>
        ),
        accessor: "firstName"
      },
      {
        Header: () => (
          <div>
            <div>
              <Child
                key="status"
                name="status"
                options={this.getValuesFromKey("status")}
                handleFilter={this.handleFilter}
              />
            </div>
            <span>Status</span>
          </div>
        ),
        accessor: "status",
      },
      {
        Header: "Age",
        accessor: "age"
      }
    ];
    this.setState({ columns });
  }

  //Rendering the data table
  render() {
    const { data, columns } = this.state;
    return (
      <div>
        <ReactTable
          data={data}
          columns={columns}
        />
      </div>
    );
  }
}
const rootElement = document.getElementById("root");
render(<App />, rootElement);

孩子

import * as React from "react";
import { Button, Checkbox, Icon } from "semantic-ui-react";
interface IProps {
  options: any;
  name: string;
  handleFilter(val1: any, val2: any, val3: void): void;
}
interface IState {
  showList: boolean;
  selected: [];
  checkboxOptions: any;
}
export default class Child extends React.Component<IProps, IState> {
  constructor(props: any) {
    super(props);
    this.state = {
      selected: [],
      showList: false,
      checkboxOptions: this.props.options.map((option: any) => option.checked)
    };
  }

  // Checkbox change handler
  handleValueChange = (event: React.FormEvent<HTMLInputElement>, data: any) => {
    const i = this.props.options.findIndex(
      (item: any) => item.field === data.name
    );
    const optionsArr = this.state.checkboxOptions.map(
      (prevState: any, si: any) => (si === i ? !prevState : prevState)
    );
    this.setState({ checkboxOptions: optionsArr });
  };

  //Passing the checked values back to parent
  passSelectionToParent = (event: any) => {
    event.preventDefault();
    const result = this.props.options.map((item: any, i: any) =>
      Object.assign({}, item, {
        checked: this.state.checkboxOptions[i]
      })
    );
    const selected = result
      .filter((res: any) => res.checked)
      .map((ele: any) => ele.field);
    console.log(selected);
    this.props.handleFilter(this.props.name, selected, result);
  };

  //Show/Hide filter
  toggleList = () => {
    this.setState(prevState => ({ showList: !prevState.showList }));
  };

  //Rendering the checkboxes based on the local state, but still it gets lost after filtering happens
  render() {
    let { showList } = this.state;
    let visibleFlag: string;
    if (showList === true) visibleFlag = "visible";
    else visibleFlag = "";
    return (
      <div>
        <div style={{ position: "absolute" }}>
          <div
            className={"ui scrolling dropdown column-settings " + visibleFlag}
          >
            <Icon className="filter" onClick={this.toggleList} />
            <div className={"menu transition " + visibleFlag}>
              <div className="menu-item-holder">
                {this.props.options.map((item: any, i: number) => (
                  <div className="menu-item" key={i}>
                    <Checkbox
                      name={item.field}
                      onChange={this.handleValueChange}
                      label={item.field}
                      checked={this.state.checkboxOptions[i]}
                    />
                  </div>
                ))}
              </div>
              <div className="menu-btn-holder">
                <Button size="small" onClick={this.passSelectionToParent}>
                  Apply
                </Button>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

Answer 1

这似乎是一种以不方便的方式管理状态的情况。目前，状态是在子级别管理的，但在父级别管理会更容易。这在 React 中称为 lifting state up。

要点 - 共享状态在父组件中管理，并通过调用传递给子组件的函数来更新。当单击 Apply 时，选中的单选值会向上传递给 Parent，Parent 会将新的选择合并到共享状态。

我已经为您的代码创建了一个最小示例，展示了我们如何将状态从子组件提升到父组件。我还使用了一些 React 的新特性，比如 useState 来简化 Child 组件。

// Child Component
const Child = ({name, options, updateSelections}) => {
  const [selected, setSelected] = React.useState([]);
  const handleChange = (event) => {
    let updated;
    if (event.target.checked) {
      updated = [...selected, event.target.value];
    } else {
      updated = selected.filter(v => v !== event.target.value);
    }
    setSelected(updated);
  }
  
  const passSelectionToParent = (event) => {
    event.preventDefault();
    updateSelections(name, selected);
  }

  return (
    <form>
      {options.map(item => (
        <label for={name}>
          <input
            key={name}
            type="checkbox"
            name={item}
            value={item}
            onChange={handleChange}
          />
          {item}
        </label>
      ))}
      <button onClick={passSelectionToParent}>Apply</button>
    </form>
  )
}

// Parent Component
class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.fields = ["firstName", "status"],
    this.state = {
      selected: {}
    };
  }
  
  getValuesFromKey = (data, key) => {
    return data.map(item => item[key]);
  }
  
  updateSelections = (name, selection) => {
    this.setState({
      selected: {...this.state.selected, [name]: selection}
    }, () => console.log(this.state.selected));
  }

  render() {
    return (
      <div>
        {this.fields.map(field => (
          <Child
            key={field}
            name={field}
            options={this.getValuesFromKey(this.props.data, field)} 
            updateSelections={this.updateSelections}
          />
        ))}
      </div>
    )
  }
}

const data = [
  { firstName: "Jack", status: "Submitted" },
  { firstName: "Simon", status: "Pending" },
  { firstName: "Pete", status: "Approved" },
  { firstName: "Lucas", status: "Rejected" }
];

ReactDOM.render(<Parent data={data}/>, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.7.0-alpha.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.7.0-alpha.2/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Answer 2

只有在您隐藏/显示表格时，您的复选框值才会丢失，因为表格已用完 DOM 它的状态和它的孩子都丢失了。当表挂载到 DOM 时，Child 组件再次被挂载，初始化一个新状态，取复选框值 getValuesFromKey 方法默认返回 false 清除复选框。

return {
  field: keys[0],
  checked: false
};

Stackblitz reproducing the issue.

您必须设置复选框值检查selectedValues 对象以查看它是否被选中。

return {
  field: keys[0],
  checked: this.state.selectedValues[key] && this.state.selectedValues[key].includes(keys[0]),
};