Child 组件的本地状态在 parent 组件内部发生变化时发生变化:ReactJS
Child component's local state changes when change happens inside parent component : ReactJS
我有一种情况,我在 React 中为 table 实现自定义下拉过滤器。我为每一列设置了下拉值,并且有一个应用按钮。
我为此维护了一个 child 组件,它接受下拉值并将选定的值发送回 parent。
过滤发生了,但是当我再次打开这个下拉菜单时,复选框值丢失了。
谁能告诉我哪里错了?
我卡在这里了
沙盒:https://codesandbox.io/s/nervous-elgamal-0zztb
我添加了带有适当注释的沙箱 link。请看一看。我有点新反应。
非常感谢帮助
Parent
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);
Child
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>
);
}
}
对不起,我下面的回答是错误的。
在您的主要组件中,您只设置了一次 state.columns,当组件安装时。之后永远不会改变。
但是每次你的 state.data 发生变化时,你的主要组件会得到 re-rendered 并且 ReactTable
组件会得到 re-rendered 以及新数据 AND 与你原来的 state.columns 没有关于所选选项的信息。
我认为你应该在每次更新后重建你的列对象,在你的子组件中传递一个像 selectedOption
.
这样的道具
您的子道具取决于您的 state.selectedValues 和 state.data。
您可以在 render() 中重建您的列对象。我正在使用一种方法 buildColumns 从渲染中获取细节。
您所在的州不需要 columns
属性。
...
constructor(props) {
super(props);
this.state = {
data: [
{ firstName: "Jack", status: "Submitted", age: "14" },
{ firstName: "Simon", status: "Pending", age: "15" },
{ firstName: "Pete", status: "Approved", age: "16" },
{ firstName: "Lucas", status: "Rejected", age: "19" }
],
selectedValues: {},
};
}
...
buildColumns = ({ data, selectedValues = {} }) => {
const { firstName, status } = selectedValues
return [
{
Header: () => (
<div>
<div style={{ position: "absolute", marginLeft: "10px" }}>
<Child
key="firstName"
name="firstName"
options={this.getValuesFromKey(data, "firstName")}
selectedOption={firstName}
handleFilter={this.handleFilter}
/>
</div>
<span>First Name</span>
</div>
),
accessor: "firstName",
sortable: false,
show: true,
displayValue: " First Name"
},
{
Header: () => (
<div>
<div style={{ position: "absolute", marginLeft: "10px" }}>
<Child
key="status"
name="status"
options={this.getValuesFromKey(data, "status")}
selectedOption={status}
handleFilter={this.handleFilter}
/>
</div>
<span>Status</span>
</div>
),
accessor: "status",
sortable: false
},
{
Header: "Age",
accessor: "age"
}
];
}
render() {
const { data, selectedValues } = this.state;
const columns = this.buildColumns({ data, selectedValues })
return (
<div>
<ReactTable
data={data}
columns={columns}
defaultPageSize={10}
className="-striped -highlight"
/>
</div>
);
}
您仍然需要在您的子组件中使用 selectedOption
道具来预先选中您的复选框。
旧的(错误的)答案:
当您获取过滤数据并使用它设置状态时,既然您的 state.data 已经更改,它将 re-render 子组件从中获取道具。
这会将您的子组件的状态重新初始化为其 {selected: []}
值。
为防止这种情况发生,您应该将您的状态仅保留在主组件中,并通过道具传递所选选项的信息,从而使您的子组件成为 'controlled component':https://reactjs.org/docs/forms.html#controlled-components
我有一种情况,我在 React 中为 table 实现自定义下拉过滤器。我为每一列设置了下拉值,并且有一个应用按钮。
我为此维护了一个 child 组件,它接受下拉值并将选定的值发送回 parent。
过滤发生了,但是当我再次打开这个下拉菜单时,复选框值丢失了。
谁能告诉我哪里错了?
我卡在这里了
沙盒:https://codesandbox.io/s/nervous-elgamal-0zztb
我添加了带有适当注释的沙箱 link。请看一看。我有点新反应。
非常感谢帮助
Parent
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);
Child
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>
);
}
}
对不起,我下面的回答是错误的。
在您的主要组件中,您只设置了一次 state.columns,当组件安装时。之后永远不会改变。
但是每次你的 state.data 发生变化时,你的主要组件会得到 re-rendered 并且 ReactTable
组件会得到 re-rendered 以及新数据 AND 与你原来的 state.columns 没有关于所选选项的信息。
我认为你应该在每次更新后重建你的列对象,在你的子组件中传递一个像 selectedOption
.
您的子道具取决于您的 state.selectedValues 和 state.data。 您可以在 render() 中重建您的列对象。我正在使用一种方法 buildColumns 从渲染中获取细节。
您所在的州不需要 columns
属性。
...
constructor(props) {
super(props);
this.state = {
data: [
{ firstName: "Jack", status: "Submitted", age: "14" },
{ firstName: "Simon", status: "Pending", age: "15" },
{ firstName: "Pete", status: "Approved", age: "16" },
{ firstName: "Lucas", status: "Rejected", age: "19" }
],
selectedValues: {},
};
}
...
buildColumns = ({ data, selectedValues = {} }) => {
const { firstName, status } = selectedValues
return [
{
Header: () => (
<div>
<div style={{ position: "absolute", marginLeft: "10px" }}>
<Child
key="firstName"
name="firstName"
options={this.getValuesFromKey(data, "firstName")}
selectedOption={firstName}
handleFilter={this.handleFilter}
/>
</div>
<span>First Name</span>
</div>
),
accessor: "firstName",
sortable: false,
show: true,
displayValue: " First Name"
},
{
Header: () => (
<div>
<div style={{ position: "absolute", marginLeft: "10px" }}>
<Child
key="status"
name="status"
options={this.getValuesFromKey(data, "status")}
selectedOption={status}
handleFilter={this.handleFilter}
/>
</div>
<span>Status</span>
</div>
),
accessor: "status",
sortable: false
},
{
Header: "Age",
accessor: "age"
}
];
}
render() {
const { data, selectedValues } = this.state;
const columns = this.buildColumns({ data, selectedValues })
return (
<div>
<ReactTable
data={data}
columns={columns}
defaultPageSize={10}
className="-striped -highlight"
/>
</div>
);
}
您仍然需要在您的子组件中使用 selectedOption
道具来预先选中您的复选框。
旧的(错误的)答案:
当您获取过滤数据并使用它设置状态时,既然您的 state.data 已经更改,它将 re-render 子组件从中获取道具。
这会将您的子组件的状态重新初始化为其 {selected: []}
值。
为防止这种情况发生,您应该将您的状态仅保留在主组件中,并通过道具传递所选选项的信息,从而使您的子组件成为 'controlled component':https://reactjs.org/docs/forms.html#controlled-components