![](/img/trans.png)
[英]How to update a parent's component state from a child component in Reactjs
[英]Prevent child's state from reset after parent component state changes also get the values of all child components:ReactJS+ Typescript
我对反应有点陌生,在这种情况下,我将为React中的表实现自定义下拉过滤器。 我为每列设置了下拉值,并且有一个“应用”按钮。
我为此维护了一个子组件,该组件接收下拉值并将选定的子组件发送回父组件。 然后,我调用一个后端API,该API向我提供过滤后的数据,这些数据依次设置了父状态。 这里的问题是在获取数据并设置父状态后,下拉列表中的复选框值丢失了。
每个子组件都有一组复选框,一个“应用”和一个清除按钮。 因此,在单击“应用”时,我必须将选中的对象发送给父级,或者通常将选中的对象发送给父对象,而不会丢失先前的内容。
我不明白为什么我会丢失复选框值?
如果有人可以帮助我,这将有很大的帮助
沙盒: https : //codesandbox.io/s/nervous-elgamal-0zztb
我在沙盒链接中添加了适当的注释。 请看一看。 我有点新反应。
帮助将不胜感激
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>
);
}
}
这似乎是状态管理不便的情况。 当前,状态在子级进行管理,但在父级进行管理将更加容易。 这在React中被称为提升状态 。
要点-共享状态在父组件中进行管理,并通过调用传递给子组件的函数来对其进行更新。 单击“应用”后,选定的单选值将传递到“父级”,“父级”会将新选择合并到共享状态。
我创建了一个最小的代码示例,展示了如何将状态从子级提升到父级。 我还使用了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>
仅当您隐藏/显示表时,复选框值才会丢失,因为表从DOM中移出时,其状态以及其子级都将丢失。 将表安装到DOM时,再次安装Child
组件,以从getValuesFromKey
方法获取复选框值的状态初始化一个新状态,默认情况下,该值将返回false,清除复选框的刻度。
return {
field: keys[0],
checked: false
};
您必须设置复选框值,以检查selectedValues
对象以查看是否已选中它。
return {
field: keys[0],
checked: this.state.selectedValues[key] && this.state.selectedValues[key].includes(keys[0]),
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.