Question

以下代码为MUI按钮返回[e.target.name]的未定义值，而TextField没有问题。我在这里想念东西吗？

思考和理解

apps.js

            <TextField
                id="password"
                name="password"
                label="Mot de passe"
                type="password"
                placeholder="votre MDP"
                defaultValue=''
                margin="normal"
                onChange={handleOnChange}

            />
            <Button
                id="test"
                name="test"
                variant="outlined"
                color="primary"
                className={classes.button}
                style={{ margin: '2rem' }}
                onClick={handleOnClick}
            >
                Connect
            </Button>

helpers.js

export const handleOnChange = e => {

    console.log([e.target.name], e.target.value);
}

export const handleOnClick = e => {
    e.preventDefault();
    console.log([e.target.name], 'submit');
}

在控制台中

["password"] "xx"
[undefined] "submit"

Answer 1

来自Material UI的文档：

1- https://material-ui.com/api/button/

没有预期的属性name

2- https://material-ui.com/api/text-field/#textfield-api

存在预期的属性name

按钮通常不需要名称属性。

能否请您详细说明为什么需要它？

Answer 2

为了使它更通用，我进行了一些更改

qsort

材质UI按钮：e.target.name未定义

2 个答案: