我是React JS的新手。在这里,我有一个具有复选框功能的表。在此过程中,我正在创建一个动态状态,并将其传递给实际表所在的子组件
我的代码就像,
JobList.js
bottom: TabBar(
tabs: <Widget>[
Tab(text: "Maintenance"),
Tab(text: "Repair"),
],
labelColor: Colors.black,
)
现在,在这段代码中,我试图选中和取消选中复选框。
class JobList extends React.Component {
constructor(props) {
this.state = {
isCheckd: false
}
handleCheckBox = () => {
this.setState({
isCheckd: !this.state.isCheckd
}, () => {
this.props.jobs.forEach((item) => this.setState({ [item.jdName]: this.state.isCheckd }))
});
}
handleTableCheckboxChange = (e) => {
this.setState({
[e.target.name]: e.target.checked
}, () => {
const uncheckedItems = this.props.jobs.filter((item) => !this.state[item.jdName])
this.setState({
isCheckd: uncheckedItems.length === 0 ? true : false
});
});
}
return() (
<table className="table" id="actions-table">
<tbody>
<tr>
<td className="text-right mr-1"><input type="checkbox" checked={this.state.isCheckd} onChange={this.handleCheckBox} />
</td> </tr></tbody></table>
}
<UserJobsTabel
jobList={filteredList}
sortAscending={this.sortData}
sortCountAndScoreAscending={this.sortNumbersAscending}
addNewRow={this.addNewRow}
isRowAddingEditorVisible={this.props.isRowAddingEditorVisible}
removeRow={this.removeRow}
checked={this.state.isCheckd}
handleTableCheckboxChange={this.handleTableCheckboxChange} />
}
const mapStateToProps = (state) => {
return {
jobs: state.UserJobs.jobList,
}
}
现在,我想将其传递给this.state[item.jdName] so this state is getting generated for the each element in the array.
。
UserJobsTable
我想将其设置为 const UserJobsTable = (props) => {
return (
<tbody className="text-center">
{props.isRowAddingEditorVisible && <RowAddingEditor removeRow={props.removeRow} />}
{props.jobList && props.jobList && props.jobList.length > 0 && props.jobList.map((item, key) => {
return (
<tr key={key}>
<td align="center"> <input type="checkbox" name={props.key} checked={props[item.jdName]} onChange={props.handleTableCheckboxChange} /></td></tr></tbody> ) }
handleTableCheckboxChange = (e) => {
this.props.jobs.filter((item) => this.setState(prevState => ({
dynamicProp: {
...prevState.dynamicProp,
[item.jdName]: e.target.name === [item.jdName] ? true : false
}
})
))
}
。因此,我没有办法通过这种状态。有什么办法可以做到吗?
答案 0 :(得分:1)
您可以将动态属性包装在键下并传递。
this.state = {
isCheckd: false,
dynamicProp: {}
}
handleCheckBox = () => {
this.setState({
isCheckd: !this.state.isCheckd
}, () => {
this.props.jobs.forEach((item) =>
this.setState(prevState => {
dynamicProp: {
...prevState.dynamicProp,
[item.jdName]: prevState.isCheckd
}
})
)
});
}
在所有setState中,您都可以
this.setState(prevState => {
dynamicProp: {
...prevState.dynamicProp,
[item.jdName]: prevState.isCheckd
}
})
,并相应地将其传递给孩子。