TextField 和 Select 不会改变 - React JS

Question

我是全栈开发的新手，我正在尝试用React JS编写一些代码来更好地理解前端。我一直在使用redux，但从未出现过错误。我一直在尝试从firebase文档中编写一个字段列表，我可以从已知数据中修改这些字段并将其发送回服务器。但每个TextField和Select都不会改变它们的值：

class PostDialog extends Component {
state = {
open: false,
oldPath: '',
newPath: '',
Code:"",
barrCode:"",
color:"",
size:"",
qnt:"",
brand:"",
cat:"",
price:"",
createdAt:"",
descr:"",
errors:{}
};
componentDidMount() {
if (this.props.openDialog) {
this.handleOpen();
}
}
handleOpen = () => {
let oldPath = window.location.pathname;
const { userHandle, postId } = this.props;
const newPath = `/inv/${postId}`;
if (oldPath === newPath) oldPath = `/inv`;
window.history.pushState(null, null, newPath);

this.props.getPost(this.props.postId);
this.setState({ open: true, oldPath, newPath, size: this.props.size });
};
handleClose = () => {
window.history.pushState(null, null, this.state.oldPath);
this.setState({ open: false });
this.props.clearErrors();
};
handleChange=(event)=>{
this.setState({[event.target.name]: event.target.value})
};
onTodoChange(value){
this.setState({
barrCode: value
});
}
render() {
const {errors} = this.state;
const {
classes,
post: {
postId,
Code, barrCode, color,size,qnt,brand,cat,price,createdAt,descr,available
},
UI: { loading }
} = this.props;

const ITEM_HEIGHT = 48;
const ITEM_PADDING_TOP = 8;
const MenuProps = {
PaperProps: {
style: {
maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
width: 250,
},
},
};
const dialogMarkup = loading ? (
<div className={classes.spinnerDiv}>
<CircularProgress size={200} thickness={2} />
</div>
) : (
<Grid container spacing={16}>
<Grid item sm={7}>
<hr className={classes.invisibleSeparator} />
<Typography variant="body2" color="textSecondary">
{dayjs(createdAt).format('h:mm a, MMMM DD YYYY')}
</Typography>
<hr className={classes.invisibleSeparator} />
<TextField
name="barrCode"
type="text"
label="Codice a Barre"
placeholder="111111111"
rows="1"
error={errors.barrCode ? true : false}
helperText={errors.barrCode}
className={classes.TextField}
value={barrCode}
onChange={this.handleChange}
fullWidth
/>
<TextField
name="price"
type="text"
label="Prezzo"
placeholder="111111111"
rows="1"
error={errors.price ? true : false}
helperText={errors.price}
className={classes.TextField}
value={price}
onChange={this.handleChangePrice}
fullWidth
/>
<Box display="flex" flexDirection="row">
<Box>
<InputLabel id="brand">Marca</InputLabel>
<Select
labelId="Marca"
id="brand"
value={brand}
onChange={this.brandChange}
input={<Input />}
MenuProps={MenuProps}
>
{brands.map((brand) => (
<MenuItem value={brand}>
{brand}
</MenuItem>
))}
</Select>
</Box>
<Box>
<InputLabel id="cat">Categoria</InputLabel>
<Select
labelId="Marca"
id="cat"
value={cat}
onChange={this.catChange}
input={<Input />}
MenuProps={MenuProps}
>
{cats.map((cat) => (
<MenuItem value={cat}>
{cat}
</MenuItem>
))}
</Select>
</Box>

</Box>


</Grid>
<hr className={classes.visibleSeparator} />
<DeletePost postId={postId} />
{/* <CommentForm postId={postId} /> */}
{/* <Comments comments={comments} />  */}
</Grid>
);
return (
<Fragment>
<MyButton
onClick={this.handleOpen}
tip="Modifica"
tipClassName={classes.expandButton}
>
<UnfoldMore color="primary" />
</MyButton>
<Dialog
open={this.state.open}
onClose={this.handleClose}
fullWidth
maxWidth="sm"
>
<MyButton
tip="Close"
onClick={this.handleClose}
tipClassName={classes.closeButton}
>
<CloseIcon />
</MyButton>
<DialogContent className={classes.dialogContent}>
{dialogMarkup}
</DialogContent>
</Dialog>
</Fragment>
);
}
}
PostDialog.propTypes = {
clearErrors: PropTypes.func.isRequired,
getPost: PropTypes.func.isRequired,
postId: PropTypes.string.isRequired,
post: PropTypes.object.isRequired,
UI: PropTypes.object.isRequired
};
const mapStateToProps = (state) => ({
post: state.data.post,
UI: state.UI
});
const mapActionsToProps = {
getPost,
clearErrors
};
export default connect(
mapStateToProps,
mapActionsToProps
)(withStyles(styles)(PostDialog));

我不知道如何解决这个问题，我该怎么办？

Answer 1

尝试这个

handleChange=(event)=>{
this.setState({ ...this.state, event.target.name: event.target.value });
};

编辑还将html输入中的值更改为类似value={this.state.[somevalue]}

<TextField
name="barrCode"
type="text"
label="Codice a Barre"
placeholder="111111111"
rows="1"
error={errors.barrCode ? true : false}
helperText={errors.barrCode}
className={classes.TextField}
value={this.state.barrCode}
onChange={this.handleChange}
fullWidth
/>