Dynamic React Material TextField仅关注创建的最后一个

Question

我有一系列目标，例如：

playerGoals: [
        {
            id: 0,
            goalType: 'A goal type',
            goalName: 'Win the lottery'
        },
        {
            id: 1,
            goalType: 'Move career',
            goalName: 'New Job'
        }
    ]

我想将它们映射到这样的组件数组：

const FormRows = () => {
        return (
            <Fragment>
                {context.state.playerGoals.map((goal, index) => (
                    <Goal
                        key={index}
                        index={index}
                        goalType={goal.goalType}
                        goalName={goal.goalName}
                        name={goal.goalName}
                    />
                ))}
            </Fragment>
        );
    };

而且我的组件包含一个材料用户界面文本字段和一个handleChange函数：

const handleChange = (event) => {
        console.log('GOAL', index, event.target.value);
        const goalPayload = {
            index: index,
            value: event.target.value
        };
        dispatch({ type: setGoalName, payload: goalPayload });
    };

    return (
        <Fragment>
            <FormControl className={classes.goalContainer}>
                <FormControlLabel
                    control={
                        <TextField
                            className={classes.goal}
                            onChange={handleChange}
                            id="outlined-basic"
                            label={goalType}
                            variant="outlined"
                            value={context.state.playerGoals[index].goalName}
                            inputRef={(input) => input}
                            onFocus={(input) => onFocus(input)}
                        />
                    }
                    label={goalType}
                    labelPlacement="start"
                />
                {getDeleteIcon()}
            </FormControl>
        </Fragment>
    );

无论我做什么，焦点总是切换回我创建的最新目标组件？如何重新选择所选的任何组件？

const onFocus = (event, input) => {
        input && input.focus();
        // handleChange();
        console.log(event.target.value);
    };

Answer 1

这可能是由于静态ID id="outlined-basic"引起的。

您是否可以使用基于传递到此组件的数据生成的动态文件，看看是否可以解决您的问题？