Question

我对React不熟悉，并希望得到一些帮助。我在表单中有一个表，其中每一行都是具有状态（“待批准”或“已批准”）的项目。我的每一行都有一个复选框。我希望这样，当选中一行旁边的复选框并提交表单时，我可以将每个所选项目的状态更改为“已批准”。

<Form>
    <FormGroup>
        <Button type="submit" onClick {this.submitClicked}>Approve Projects</Button>
    </FormGroup>
<Table bordered={true}>
    <thead>
        <tr>
            <th>Select</th>
            <th>Project Name</th>
            <th>Project Number</th>
            <th>Project Status</th>
            <th>Min Size</th>
            <th>Max Size</th>
        </tr>
    </thead>
    <tbody>
        {projects.map((project: Project) =>
            <tr key={project.projectNumber}>
                <td>               
                    <FormControl
                        type="checkbox"
                        id="selected"
                        value={project.projectName}
                        onChange={e => this.handleChange(e)}
                    />
                </td>
                <td>{project.projectName}</td>
                <td>{project.projectNumber}</td>
                <td>{project.status}</td>
                <td>{project.minSize}</td>
                <td>{project.maxSize}</td>
            </tr>
        )}
    </tbody>
</Table>
</Form>

我的handleChange功能应该怎么做？我应该怎么做呢？我想知道是否有某种方法可以将所选项目添加到数组中，然后更改其状态值？

Answer 1

您可以使用 state 的组件。这允许您管理组件内的状态。因此，您可以操纵它并更改项目＆＃39;您的示例中的状态。有关此内容的更多信息，请访问：state classes

示例：

class YourComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {projects: props.projects};
  }

   handleChange = (e) => {
      let projects = this.state.projects;
      // manipulate your project here
      this.setState({
         projects: projects
      });
   }

   render(){
      return (<Form>
         (...)
      </Form>)
   }
}

创建一个带有复选框的表，该复选框用于更新React中的表值

1 个答案: