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元素，而event.target.value的{{1}}未定义。

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

h3

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

（如果您没有使用handleClick = (event, i) => { console.log(i); }值，则可能要忽略它。）

或，如果要坚持使用当前的实现，则可以通过event访问该值。 currentTarget vs target

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

1 个答案: