如何在表单中为 ReactJS TextField 设置 HTML 数据标签答案

【问题标题】：How do you set a HTML data- tag for a ReactJS TextField in a form如何在表单中为 ReactJS TextField 设置 HTML 数据标签
【发布时间】：2020-08-18 21:07:47
【问题描述】：

我有一些自动化功能正在寻找 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>

在上述代码中的什么地方以及如何放置一个 HTML 数据标签？

【问题讨论】：

代码示例中有 6 个元素 - 它必须放在哪里？
说实话，我不确定。我正在尝试能够选择文本字段，以便在其中输入数据。
React 中没有 TextField - 这是使用 MaterialUI 吗？

标签： node.js reactjs automation material-ui

【解决方案1】：

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

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

【讨论】：

谢谢塞缪尔！做到了。使用上述方法，我能够在使用 Chrome 开发工具时在元素上显示 HTML 数据标记。我仍然无法让 Puppeteer 认出它，但那是另一回事了。再次感谢山姆。