从未定义的数组值映射的反应按钮

Question

所以我将一个数组映射到按钮，该按钮的值是数组的元素，但是当我将 event.target.value 记录到控制台时，有时会出现未定义。

当我点击每个按钮时，我会在控制台中得到这个

0
1
2
3
undefined
undefined
undefined
6
7
undefined
9

这是我的代码

class App extends Component {
  constructor(props) {
    super(props)

    this.state = {
      selected: '',
      numbers: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
    }
  }

  handleClick = (event) => {
    event.preventDefault()
    console.log(event.target.value);

  }

  render() {
    return (
      <div>
          <Container>
            <Row>
              {this.state.numbers.map(i => {
                return (
                  <Col key={i.toString()}>
                    <ButtonToolbar>
                      <Button
                        value={i}
                        onClick={this.handleClick}
                      >
                        <h3>{i}</h3>
                      </Button>
                    </ButtonToolbar>
                  </Col>
                )
              })}
            </Row>
          </Container>
      </div>
    );
  }
}

Answer 1

这是因为有时您单击的是Button 组件，有时是嵌套的h3 元素，而h3 的event.target.value 未定义。

最好在 onClick 处理程序中传递值。

...
onClick={(event) => this.handleClick(event, i)}
...

handleClick = (event, i) => {
  console.log(i);
}

（如果您对它没有用处，您可能想省略 event 值。）

或如果您想坚持当前的实现，您可以通过event.currentTarget.value 访问该值。 currentTarget vs target