4

我有这个功能

handleChangeButton = (e) => {
    alert(e.target.value)
    this.props.setFieldValue('degreeLevel', e.target.value);
  }

在我的组件渲染中，我有

<div className="twelve columns">
            <p>Degree Level</p>
            <Button
              variant="raised"
              label="Default"
              onClick = { this.handleChangeButton }
              value="Doctorate"
            >
              Doctorate
            </Button>

            <Button variant="raised" label="Default">
              Masters
            </Button>

            <Button variant="raised" label="Default">
              Undergraduate
            </Button>
          </div>

所以，我想要做的是，当我单击Doctorate按钮时，它应该this.props.setFieldValue是我表单degreeLevel中的字段之一。Formik当我单击按钮时，警报会告诉我undefined，这意味着它没有读取 value Doctorate。

如何e.target.value读取按钮的值？

4

2 回答 2

34

使用currentTarget代替target

handleChangeButton = (e) => {
    alert(e.currentTarget.value)
    this.props.setFieldValue('degreeLevel', e.currentTarget.value);
}
于 2018-05-18T15:03:14.237 回答
1

@yugantarkumar @monsto，这不是 Material UI 特有的，而是在 JS 中通过使用事件冒泡来完成的。您可以在此处阅读有关差异的更多信息：http ://www.qc4blog.com/?p=650

currentTarget指的是事件侦听器所附加到target的元素，而表示与之交互的元素。在MUI此问题中是由单击MuiButton-label组件而不是MuiButtonBase组件引起的。

于 2021-06-29T06:49:54.177 回答