Node.js 如何为表单中的ReactJS文本字段设置HTML数据标记

我已经实现了一些寻找HTML数据标记（例如：“data foobar”）的自动化，并且我有一个login.js，以便：

<div className={styles.whiteBoard}>
    <main className={styles.content}>
        <div>
           <div className={styles.spacer}></div>
                <form onSubmit={e => submit(e)}>
                    <TextField
                        className={styles.input}
                        label="Username"
                        autoFocus
                        variant="outlined"
                        margin="normal"
                        value={username}
                        onChange={e => setUsername(e.target.value)}
                    />
                </form>
            </div>
        </main>

提交（e）}>
setUsername（e.target.value）}
/>

在上面的代码中，在哪里以及如何放置HTML数据标记？

您可以使用TextField的对象来设置数据属性

<TextField inputProps={{'data-foobar': 'foo bar'}}/>

代码示例中有6个元素-它必须放在哪里？老实说，我不确定。我正在尝试选择文本字段，以便在其中输入数据。react中没有文本字段-这是使用MaterialUI吗？谢谢Samuel！成功了。使用上述方法，我能够在使用Chrome开发工具时在元素上显示一个HTML数据标记。我仍然很难让木偶演员认出它，但那是另一回事了。再次感谢山姆。