Javascript 如何使用textfields名称和值访问动态数组中的正确对象？
我有一个动态的值数组，我希望在键入和提交文本字段时能够对其进行更改。如何通过提交textfields来正确更改数组正确对象中变量的值 我试着将练习的关键与我需要的价值观联系起来，但它不起作用 这是父函数Javascript 如何使用textfields名称和值访问动态数组中的正确对象？,javascript,reactjs,material-ui,Javascript,Reactjs,Material Ui,我有一个动态的值数组，我希望在键入和提交文本字段时能够对其进行更改。如何通过提交textfields来正确更改数组正确对象中变量的值 我试着将练习的关键与我需要的价值观联系起来，但它不起作用 这是父函数 export default class AddWorkoutForm extends Component { state = { step: 1, name: '', duration: 0, date: '',
export default class AddWorkoutForm extends Component {
state = {
step: 1,
name: '',
duration: 0,
date: '',
exerciselist: [
{
id: uuid.v4(),
exerciseName: '',
numberOfSets: 0,
weight: 0,
reps: 0
}
],
}
// Generate Exercise objects in exerciselist
addExercises = () => {
this.setState({
exerciselist: [
...this.state.exerciselist,
{
id: uuid.v4(),
exerciseName: '',
numberOfSets: 0,
weight: 0,
reps: 0
}
]
})
}
// Remove exercise object in exerciselist
removeExercises = (id) => {
if (this.state.exerciselist.length > 1) {
this.setState({
exerciselist: [...this.state.exerciselist.filter(exercise => exercise.id !== id)]
})
}
}
// Proceed to next step
nextStep = () => {
const { step } = this.state;
this.setState({
step: step + 1
});
};
// Go back to prev step
prevStep = () => {
const { step } = this.state;
this.setState({
step: step - 1
});
};
// Handle fields change
handleChange = (e) => {
this.setState({ [e.target.name]: e.target.value });
};
render() {
const { step } = this.state;
const { name, duration, date, exerciselist } = this.state;
const values = { name, duration, date, exerciselist };
switch (step) {
case 1:
return (
<AddWorkout
nextStep={this.nextStep}
handleChange={this.handleChange}
values={values}
/>
);
case 2:
return (
<AddExercise
nextStep={this.nextStep}
prevStep={this.prevStep}
handleChange={this.handleChange}
addExercises={this.addExercises}
removeExercises={this.removeExercises}
values={values}
/>
);
case 3:
return (
<AddWorkoutConfirm
nextStep={this.nextStep}
prevStep={this.prevStep}
handleChange={this.handleChange}
values={values}
/>
);
}
}
}
导出默认类AddWorkoutForm扩展组件{
状态={
步骤：1，
名称：“”，
持续时间：0，
日期：''，
练习表：[
{
id:uuid.v4（），
练习名：“”，
数量集：0，
重量:0,，
销售代表：0
}
],
}
//在练习列表中生成练习对象
加法器练习=（）=>{
这是我的国家({
练习表：[
…此.state.exerciselist，
{
id:uuid.v4（），
练习名：“”，
数量集：0，
重量:0,，
销售代表：0
}
]
})
}
//删除练习列表中的练习对象
removeExercises=（id）=>{
if（this.state.exerciselist.length>1）{
这是我的国家({
exerciselist:[…this.state.exerciselist.filter（exercise=>exercise.id！==id）]
})
}
}
//继续下一步
下一步=（）=>{
const{step}=this.state；
这是我的国家({
步骤：步骤+1
});
};
//返回上一步
prevStep=（）=>{
const{step}=this.state；
这是我的国家({
步骤：步骤-1
});
};
//处理字段更改
handleChange=（e）=>{
this.setState（{[e.target.name]：e.target.value}）；
};
render（）{
const{step}=this.state；
const{name，duration，date，exerciselist}=this.state；
常量值={name，duration，date，exerciselist}；
开关（步骤）{
案例1：
返回(
);
案例2：
返回(
);
案例3：
返回(
);
}
}
}
export default class AddExercise extends Component {
continue = (e) => {
e.preventDefault();
this.props.nextStep();
}
back = (e) => {
this.props.prevStep();
};
render() {
const { values, handleChange, addExercises, removeExercises } = this.props;
const { exerciselist } = values;
return (
<div style={{ textAlign: "center", height: "100%" }}>
<ClientMenuBar title="Add An Exercise" />
<h2>Enter Your Exercise Details</h2>
<form>
<div style={styles.form}>
{exerciselist.map((exercise) => {
return (
<div style={styles.textfieldWrapper} key={exercise.id}>
<TextField
fullWidth
label="Exercise Name"
margin="dense"
name="exerciseName"
onChange={handleChange}
defaultValue={exercise.exerciseName}
/>
<TextField
label="Starting # Of Reps"
margin="dense"
type="number"
style={styles.textfield}
name="reps"
onChange={handleChange}
defaultValue={exercise.reps}
/>
<TextField
label="Starting Weight"
margin="dense"
type="number"
style={styles.textfield}
name="weight"
onChange={handleChange}
defaultValue={exercise.weight}
/>
<TextField
label="# of Sets"
margin="dense"
type="number"
style={styles.textfield}
name="numberOfSets"
onChange={handleChange}
defaultValue={exercise.numberOfSets}
/>
<Button
onClick={() => removeExercises(exercise.id)}
size="small"
disableRipple
fullWidth
>
REMOVE EXERCISE
</Button>
</div>
);
})}
<Button
onClick={addExercises}
size="small"
disableRipple
fullWidth
>
ADD EXERCISE
</Button>
</div>
<div style={styles.buttonWrapper}>
<Button
color="inherit"
variant="contained"
style={styles.button}
size="large"
onClick={this.back}
>
back
</Button>
<Button
color="primary"
variant="contained"
style={styles.button}
size="large"
onClick={this.continue}
>
Next
</Button>
</div>
</form>
</div>
)
}
}
导出默认类AddExercise扩展组件{
继续=（e）=>{
e、 预防默认值（）；
this.props.nextStep（）；
}
后退=（e）=>{
this.props.prevStep（）；
};
render（）{
const{values，handleChange，addExercises，removeExercises}=this.props；
常量{exerciselist}=值；
返回(
输入您的练习详细信息
{exerciselist.map（（练习）=>{
返回(
removeExercises（exercise.id）}
size=“小”
无效波纹
全宽
>
消除运动
);
})}
加练习
返回
下一个
)
}
}
export default class AddWorkoutConfirm extends Component {
continue = e => {
e.preventDefault();
// PROCESS FORM //
this.props.nextStep();
};
back = e => {
e.preventDefault();
this.props.prevStep();
};
render() {
const { name, duration, date, exerciselist } = this.props.values;
return (
<div style={{ textAlign: "center", height: "100%" }}>
<ClientMenuBar title="Confirm Your Details" />
<h2>Enter Your Workout Details</h2>
<form style={styles.form}>
<List>
<ListItem>Workout Name: {name}</ListItem>
<ListItem>Estimated Duration Of Workout: {duration} mins</ListItem>
<ListItem>Number Of Exercises: {exerciselist.length}</ListItem>
<ListItem>Date Of Workout: {date}</ListItem>
</List>
<div style={{borderTop:"1px solid gray"}}>
{
exerciselist.map((exercise) => {
return (
<List key={exercise.id}>
<ListItem>Exercise Name: {exercise.exerciseName}</ListItem>
<ListItem>Number of Sets: {exercise.numberOfSets}</ListItem>
<ListItem>Starting Weight: {exercise.weight} lbs</ListItem>
<ListItem>Starting Number Of Reps: {exercise.reps}</ListItem>
</List>
)
})}
</div>
<br />
<div style={styles.buttonWrapper}>
<Button
color="inherit"
variant="contained"
style={styles.button}
size="large"
onClick={this.back}
>
back
</Button>
<Button
color="primary"
variant="contained"
style={styles.button}
size="large"
onClick={this.continue}
>
Confirm
</Button>
</div>
</form>
</div>
)
}
}
导出默认类AddWorkoutConfirm扩展组件{
继续=e=>{
e、 预防默认值（）；
//过程形式//
this.props.nextStep（）；
};
后退=e=>{
e、 预防默认值（）；
this.props.prevStep（）；
};
render（）{
const{name，duration，date，exerciselist}=this.props.values；
返回(
输入您的训练详细信息
训练名称：{Name}
预计训练持续时间：{Duration}分钟
练习数：{exerciselist.length}
训练日期：{Date}
{
exerciselist.map（（练习）=>{
返回(
练习名称：{Exercise.exerciseName}
集合数：{exercise.numberOfSets}
起始体重：{exercise.Weight}磅
开始的重复次数：{exercise.Reps}
)
})}
返回
证实
)
}
}
它正确地打印出不在数组中的值，但我不知道如何对数组中的值使用handleChange。它根本没有记录我为动态数组值键入的内容。据我所知，
handleChangeaddExercises = () => {
this.setState({
exerciselist: [
...this.state.exerciselist,
{
id: uuid.v4(),
exerciseName: '',
numberOfSets: 0,
weight: 0,
reps: 0
}
]
})
}`