从 React 中的 material-ui 按钮获取值

Question

我有这个功能

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，这是我 [=17= 中的字段之一] 形式。当我单击按钮时，警报显示 undefined，这意味着它没有读取值 Doctorate。

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

Answer 1

使用currentTarget代替target

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

Answer 2

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

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

从 React 中的 material-ui 按钮获取值

Getting values from material-ui Button in React

javascript

reactjs

material-ui

formik