Question

我是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 } }) )) }。因此，我没有办法通过这种状态。有什么办法可以做到吗？

Answer 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
  }
})

，并相应地将其传递给孩子。

如何将动态创建的道具传递给组件？

1 个答案: