Javascript 使用React&Formik更新外部状态以更新输入值和表单值

这就是我试图实现的表单的基本工作流程：

输入，用户可以在其中键入自己的文本输入

用户可以选择上面三个按钮中的一个，用户单击后，它将呈现输入值以及表单的状态值

下面是我如何实现此功能的想法：

1我首先创建要作为Formik字段的组件接收的输入。 2因此，在输入内部发生更改时，输入将自动更新状态。 3然后我有按钮，每次点击时我都会将用户的输入保存到我自己的状态

首先，我将创建一个渲染函数，在该函数中，对一组随机单词进行渲染，并将onclick附加到每个单词上

    const renderButtons = () => {
        return wordList.map((word) => {
            return (
                <SquareButton
                    onClick={() => handleClick(word)}
                    text={word}
                    color='secondary'
                    size='sm'
                    shadow={true}
                    key={word}
                    fullWidth={true}
                />
            );
        });
    };

3现在，下面是将数据保存为初始值的实际输入。 我将从上面的组件接收状态，以便表单知道“单击的数据是什么”

const FormikInput = ({ label, name, selectedWord, ...rest }) => {
    const [prevWord, updateWord] = useState(selectedWord);

    return (
        <div className='form-control'>
            <label htmlFor={name} />
            <Field
                component={Input}
                id={name}
                name={name}
                selectedWord={selectedWord}
                {...rest}
            >
                {/* {({ form, field }) => {
                    return (
                        <input
                            onChange={(e) => updateWord(e.target.value)}
                            value={prevWord}
                        />
                    );
                }} */}
            </Field>

            <div className='formik__error'>
                <ErrorMessage name={name} component={FormikError} />
            </div>
        </div>
    );
};

现在，我的问题是

1我尝试将状态数据放入输入值中，但这将禁止用户输入自己的值。如何使用Formik实现这两个目标

2我如何收集其他外部状态值，并在不同组件的特定操作中合并到表单中？像上一个一样

请告知

const FormikInput = ({ label, name, selectedWord, ...rest }) => {
    const [prevWord, updateWord] = useState(selectedWord);

    return (
        <div className='form-control'>
            <label htmlFor={name} />
            <Field
                component={Input}
                id={name}
                name={name}
                selectedWord={selectedWord}
                {...rest}
            >
                {/* {({ form, field }) => {
                    return (
                        <input
                            onChange={(e) => updateWord(e.target.value)}
                            value={prevWord}
                        />
                    );
                }} */}
            </Field>

            <div className='formik__error'>
                <ErrorMessage name={name} component={FormikError} />
            </div>
        </div>
    );
};