Я должен проверить значение радиогруппы материала на основе значения состояния, но оно не работает.Если я передал значение группы радиосвязи как статическое, то оно полностью проверило группу радиосвязи, но когда я передаю значение состояния, оно не работает.Я проверил значение состояния в консольном журнале, затем я получил это значение правильноТак в чем будет проблема в моем коде.
class BugForm extends React.Component {
state = {
open: true,
name: "",
description: "",
bug_site_url: "",
bug_img_url: "",
bug_video_url: "",
contact_id_c: "",
start_due_date: "",
due_date: "",
deadline: "",
status: "",
priority: "",
is_important: false
};
constructor(props) {
super(props);
this.state = { bug_main_todoid: props.bug_main_todoid, value: 0 };
}
componentWillReceiveProps(newProps) {
if (newProps.buglist != "") {
this.setState({
name: newProps.buglist.name,
description: newProps.buglist.description,
bug_site_url: newProps.buglist.bug_site_url,
bug_img_url: newProps.buglist.bug_img_url,
bug_video_url: newProps.buglist.bug_video_url,
contact_id_c: newProps.buglist.contact_id_c,
start_due_date: newProps.buglist.start_due_date,
due_date: newProps.buglist.due_date,
deadline: newProps.buglist.deadline,
status: newProps.buglist.status,
priority: newProps.buglist.priority,
is_important: newProps.buglist.is_important
});
}
}
handleClickOpen = () => {
this.setState({
open: true
});
};
handleClose = () => {
this.props.closeBugForm();
};
handleChange = name => event => {
this.setState({ [name]: event.target.value });
};
handleDateChange = name => date => {
this.setState({ [name]: date });
};
handleSwitchChange = name => event => {
this.setState({ [name]: event.target.checked });
};
validate(name, description, bug_site_url) {
let errors = "";
const result = Joi.validate(
{
name: name,
description: description,
bug_site_url: bug_site_url
},
schema
);
if (result.error) {
errors = result.error.details[0].message;
}
return errors;
}
render() {
const { classes, contact_id } = this.props;
const { errors } = this.state;
return (
<Fragment>
<DialogContent>
<Mutation
mutation={BUG_OPERATIONS}
update={(cache, { data: { todo_operations } }) => {
const { todonotes } = cache.readQuery({
query: allnotesQuery,
variables: { id: this.state.bug_main_todoid }
});
cache.writeQuery({
query: allnotesQuery,
variables: { id: this.state.bug_main_todoid },
data: { todonotes: todonotes.concat([todo_operations]) }
});
}}
>
{(todo_operations, { loading, error }) => (
<form
className={classes.container}
noValidate
autoComplete="off"
onSubmit={e => {
let is_imp =
e.target.is_important.value == "true" ? "yes" : "No";
e.preventDefault();
const errors = this.validate(
e.target.name.value,
e.target.description.value,
e.target.bug_site_url.value
);
const variables = {
id: e.target.id.value,
name: e.target.name.value,
description: e.target.description.value,
bug_site_url: e.target.bug_site_url.value,
bug_img_url: e.target.bug_img_url.value,
bug_video_url: e.target.bug_video_url.value,
contact_id_c: e.target.contact_id_c.value,
start_due_date: e.target.start_due_date.value,
due_date: e.target.due_date.value,
deadline: e.target.deadline.value,
status: e.target.status.value,
priority: e.target.priority.value,
is_important: is_imp,
bug_main_todoid: this.state.bug_main_todoid
};
if (errors) {
this.setState({ errors });
return;
}
if (!errors) {
todo_operations({
variables: {
id: "",
name: e.target.name.value,
description: e.target.description.value,
bug_site_url: e.target.bug_site_url.value,
bug_img_url: e.target.bug_img_url.value,
bug_video_url: e.target.bug_video_url.value,
contact_id_c: e.target.contact_id_c.value,
start_due_date: e.target.start_due_date.value,
due_date: e.target.due_date.value,
deadline: e.target.deadline.value,
status: e.target.status.value,
priority: e.target.priority.value,
is_important: is_imp,
bug_main_todoid: this.state.bug_main_todoid,
is_bug: "yes"
}
})
.then(() => this.handleClose())
.then(() =>
notify("success", "Record saved successfully!")
);
}
}}
>
{errors && <p>{errors}</p>}
<TextField
id="name"
required
label="Name"
placeholder="name"
value={this.state.name}
onChange={this.handleChange("name")}
fullWidth
margin="normal"
/>
<br />
<TextField
id="description"
required
label="Description"
multiline
placeholder="Description"
rowsMax="4"
value={this.state.description}
onChange={this.handleChange("description")}
fullWidth
margin="normal"
/>
<br />
<TextField
id="bug_site_url"
required
label="Site Url"
placeholder="Site Url"
value={this.state.bug_site_url}
onChange={this.handleChange("bug_site_url")}
fullWidth
margin="normal"
/>
<br />
<TextField
id="bug_img_url"
label="Image Url"
placeholder="Image Url"
value={this.state.bug_img_url}
onChange={this.handleChange("bug_img_url")}
margin="normal"
className={classes.paddingRight18}
/>
<TextField
id="bug_video_url"
label="Video Url"
placeholder="Video Url"
value={this.state.bug_video_url}
onChange={this.handleChange("bug_video_url")}
margin="normal"
/>
<br />
<FormControl className={classes.formControl}>
<InputLabel htmlFor="contact_id_c">Select User</InputLabel>
<Select
fullWidth
value={this.state.contact_id_c}
margin="normal"
onChange={this.handleChange("contact_id_c")}
inputProps={{
name: "contact_id_c",
id: "contact_id_c"
}}
>
<MenuItem value="">
<em>Please Select User</em>
</MenuItem>
<MenuItem
key="rigal"
value="b62b9815-b1c7-dc4a-7539-59a68b95ddf5"
>
Rigal Patel
</MenuItem>
<MenuItem
key="ankit"
value="1e1eafa8-ea40-6f43-6541-5c7f539612f2"
>
Ankit Patel
</MenuItem>
</Select>
</FormControl>
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<DateTimePicker
ampm={false}
format="yyyy-MM-dd HH:mm:ss"
className={classes.paddingRight18}
name="start_due_date"
value={this.state.start_due_date}
onChange={this.handleDateChange("start_due_date")}
label="When will you Start"
margin="normal"
/>
<DateTimePicker
ampm={false}
format="yyyy-MM-dd HH:mm:ss"
name="due_date"
value={this.state.due_date}
onChange={this.handleDateChange("due_date")}
label="How long will it take?"
margin="normal"
/>
<DateTimePicker
ampm={false}
format="yyyy-MM-dd HH:mm:ss"
name="deadline"
value={this.state.deadline}
onChange={this.handleDateChange("deadline")}
label="Deadline"
margin="normal"
/>
</MuiPickersUtilsProvider>
<FormControl
component="fieldset"
className={classes.formControl}
>
<FormLabel component="legend" className={classes.paddingTop4}>
Status
</FormLabel>
<RadioGroup
aria-label="status"
name="status"
className={classes.group}
value={this.state.status}
onChange={this.handleChange("status")}
margin="normal"
>
<FormControlLabel
value="Not Started"
control={<Radio />}
label="Not Started"
/>
<FormControlLabel
value="On Hold"
control={<Radio />}
label="On Hold"
/>
<FormControlLabel
value="In Progress"
control={<Radio />}
label="In Progress"
/>
<FormControlLabel
value="Completed"
control={<Radio />}
label="Completed"
/>
<FormControlLabel
value="QA"
control={<Radio />}
label="QA"
/>
<FormControlLabel
value="QA Passed"
control={<Radio />}
label="QA Passed"
/>
<FormControlLabel
value="QA Failed"
control={<Radio />}
label="QA Failed"
/>
</RadioGroup>
</FormControl>
<FormControl
component="fieldset"
className={classes.formControl}
>
<FormLabel component="legend" className={classes.paddingTop4}>
Priority
</FormLabel>
<RadioGroup
aria-label="priority"
name="priority"
className={classes.group}
value={this.state.priority}
onChange={this.handleChange("priority")}
margin="normal"
>
<FormControlLabel
value="Normal"
control={<Radio />}
label="Normal"
/>
<FormControlLabel
value="Low"
control={<Radio />}
label="Low"
/>
<FormControlLabel
value="Medium"
control={<Radio />}
label="Medium"
/>
<FormControlLabel
value="High"
control={<Radio />}
label="High"
/>
</RadioGroup>
</FormControl>
Is Important :
<Switch
checked={this.state.is_important}
onChange={this.handleSwitchChange("is_important")}
//value={this.state.is_important}
value="1"
color="primary"
name="is_important"
id="is_important"
margin="normal"
/>
<input
type="hidden"
name="id"
id="id"
value={this.state.bug_main_todoid}
/>
<div className={classes.btnForm}>
<Button
type="submit"
variant="contained"
color="primary"
className={classes.button}
>
Save
</Button>
<Button
variant="contained"
color="secondary"
className={classes.button}
onClick={this.handleClose}
>
Cancel
</Button>
</div>
</form>
)}
</Mutation>
</DialogContent>
</Fragment>
);
}
}
export default withStyles(styles, { withTheme: true })(BugForm);
Кто угодно Пожалуйста, дайте мне решение этой проблемы.
Спасибо