我具有以下形式,起作用的部分是,当我选中并取消选中复选框时,将每个选项的状态设置为“ false”的“ true”。
我的问题是,当我第一次运行该应用程序时,如果我将某些状态设置为true,我希望这些复选框以呈现为选中状态的方式开始呈现,但是它们却没有。即使是那些状态为true的,它们也都将被选中。我相信我只是没有将价值带到正确的位置来进行检查。但是我不确定还有什么尝试。任何帮助将不胜感激。
父项:
class Audit extends Component {
constructor(props) {
super(props);
this.state = {
formRewardsService: true,
formRewardsRetirement: true,
formRewardsPeerRecognition: false,
formRewardsSpot: false
};
this.handleCheck = this.handleCheck.bind(this);
}
handleCheck(e) {
this.setState(({ isChecked }) => (
{
isChecked: !isChecked
}
));
console.log(e.target.name + ': ' + e.target.checked);
}
render() {
return (
<ThemeProvider theme={theme}>
<Container>
<Div>
<Tabs defaultActiveKey="general" id="audit=tabs">
<Tab eventKey="culture" title="Culture">
<Culture handleCheck={this.handleCheck} { />
</Tab>
</Tabs>
</Div>
</Container>
</ThemeProvider>
);
}
}
export default Audit;
带有窗体和复选框的我的子组件(前两个应该呈现为选中状态,因为它们从开始就为“ true”):
import React, { Component } from 'react';
import {Container, Form, Row, Col} from 'react-bootstrap';
import styled, { ThemeProvider } from 'styled-components';
import theme from "../../../../Config/Theme";
const Div = styled.div`
background-color: white;
color: black;
`
class Culture extends Component {
render() {
return (
<ThemeProvider theme={theme}>
<Div>
<Container >
<Form className="p-3">
<Form.Group name="formRewards1" as={Row} controlId="formRewards1" onChange={this.props.handleCheck}>
<Form.Label column sm={5}>
1.What types of employee recognition programs are utilized within the organization? Check all that apply.
</Form.Label>
<Col>
<Form.Check
type="checkbox"
label="Service Awards"
value={this.props.formRewardsService}
name="formRewardsService"
id="formRewards1-1"
checked={this.props.value}
/>
<Form.Check
type="checkbox"
label="Retirement Awards"
value={this.props.formRewardsRetirement}
name="formRewardsRetirement"
id="formRewards1-2"
checked={this.props.value}
/>
<Form.Check
type="checkbox"
label="Peer Recognition Awards"
value={this.props.formRewardsPeer}
name="formRewardsPeer"
id="formRewards1-3"
checked={this.props.value}
/>
<Form.Check
type="checkbox"
label="Spot Awards"
value={this.props.formRewardsSpot}
name="formRewardsSpot"
id="formRewards1-4"
checked={this.props.value}
/>
</Col>
</Form.Group>
</div>
</Form>
</Container>
</Div>
</ThemeProvider>
);
}
}
export default Culture;
答案 0 :(得分:1)
要一次从状态传递所有复选框的值,可以将其置于子状态,例如:
state = { checkboxes : {
formRewardsService: false,
formRewardsRetirement : true,
...
}}
,然后仅将复选框状态传递给文化道具
<Culture handleCheck={this.handleCheck} {...this.state.checkboxes } />
并像这样重写您的handleCheck函数:
handleCheck = (e) => {
const name = e.target.name;
const checked = e.target.checked
this.setState(
{
...this.state,
checkboxes: {
...this.state.checkboxes,
[name]: checked
}
}
));
console.log(e.target.name + ': ' + e.target.checked);
}
答案 1 :(得分:0)
如果您这样编写函数,则可以删除绑定函数:
handleCheck = (e) => { ...
然后编写此函数以正确设置状态,如下所示:
handleCheck = (e) => {
const name = e.target.name;
const checked = e.target.checked
this.setState(
{
[name]: checked
}
));
console.log(e.target.name + ': ' + e.target.checked);
}
然后,您必须将检查状态传递给文化道具。
render() {
return (
<ThemeProvider theme={theme}>
<Container>
<Div>
<Tabs defaultActiveKey="general" id="audit=tabs">
<Tab eventKey="culture" title="Culture">
<Culture handleCheck={this.handleCheck} formRewardsService={this.state.formRewardsService} ... />
</Tab>
</Tabs>
</Div>
</Container>
</ThemeProvider>
);
}
以及复选框:
<Form.Check
type="checkbox"
label="Service Awards"
name="formRewardsService"
id="formRewards1-1"
checked={this.props.formRewardsService}
/>