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

问题描述 投票:1回答:1

所以我将数组映射到具有该数组元素值的按钮,但是当我将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>
    );
  }
}
javascript reactjs
1个回答
0
投票

这是因为有时您单击Button组件,有时单击嵌套的h3元素,并且event.target.valueh3未定义。

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

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

((如果您无用,则可能要忽略event值。)

© www.soinside.com 2019 - 2024. All rights reserved.