如何在React中获取此ID？

Question

我正在尝试让React从从dialog.json文件映射的Button组件中获取ID。在浏览器中检查ID时，其ID是否正确在Button标记中。但是我不确定如何在onClick上抓住它。

（（在获取ID后，它会更新State并从下一个dialog.json中显示文本和按钮）

import React, { Component } from 'react';
import API from '../../utils/API';
import './style.css';
import dialog from './dialog.json';
import Button from '../../components/Button';
import Text from '../../components/Text';

class Game extends Component {
    state = {
        userID: "", //user logged in
        currentLine: dialog[0]
    }

    handleClick = () => {
        alert('Your next Line is: ' + this.id);
        console.log(dialog[0]);
        this.setState({
            currentLine: dialog[this.id]
        })
    }

    componentDidMount() {
        API.getMyDude(this.props.username).then(myDude => {
            this.setState({
                userID: myDude
            })
        })
        // this.startGame();
    }


    render() {
        return (
            <div>
                <br />
                <br />
                {/* {console.log(textNodes[0])} */}
                < Text text={this.state.currentLine.text} />
                <br />
                < div >
                    {this.state.currentLine.options.map(option => (
                        // console.log(option.nextText),
                        < Button
                            option={option.text}
                            id={option.nextText}
                            handleClick={this.handleClick}
                        />
                    ))}
                </div >
            </div >
        )
    }
}
export default Game

此外，任何其他提示或技巧都将受到欢迎！

Answer 1

您需要将click事件传递给handleClick函数。

handleClick = (event) => {
    alert('Your next Line is: ' + event.target.id);
    console.log(dialog[0]);
    this.setState({
        currentLine: dialog[event.target.id]
    })
}

Answer 2

您可以尝试将“ {option.nextTest}”作为参数传递给handleClick函数。

Answer 3

您可以在按钮组件中获取ID。实际上，您可以在对方法进行较小的更改后将handleClick作为道具（处理程序）传递给Button：

    handleClick = id => {
        alert('Your next Line is: ' + id);
        console.log(dialog[0]);
        this.setState({
            currentLine: dialog[id]
        })
    }

在Button组件中，您应将id（props）作为参数传递给处理程序（props），例如：

onClick = {()=>props.handler(props.id)}