thatsIT thatsIT - 14 days ago 9
React JSX Question

Get value from onTouchTap event

Got a class and returning an event to the parent. I want to get the touched buttons number (label on raisedbutton). I do return the event, but I can't find what I want when i console.log() it. It contains a Handler (object), Target (SyntheticUIEvent) and IsRevoked (bool).

interface INumberButtonRow {
row: number;
handleButtonClicked: any;
}

export class NumberButtonRow extends React.Component<INumberButtonRow, any> {
render() {
// Create button with a number label
return (<NumberButton buttonClicked={this.handleButtonClicked} number={1} />);
}

// Get number from onTouchTap or from number
handleButtonClicked(onTouchTapEvent) {
console.log(onTouchTapEvent)
}
}

interface INumberButtonProps {
number: number;
buttonClicked: any;
}

export class NumberButton extends React.Component<INumberButtonProps, any> {
render() {
let number = this.props.number.toString(10)
return <RaisedButton label={number} onTouchTap={this.props.buttonClicked}/>;
}
}

Answer

The onTouchTapEvent.target should be the button element, and you should be able to get the label from that (you'll need to cast it to any).

But I think that this is better:

export class NumberButtonRow extends React.Component<INumberButtonRow, any> {
    ...

    handleButtonClicked(label: string) {
        console.log(label)
    }
}

export class NumberButton extends React.Component<INumberButtonProps, any> {
    render() {
        return <RaisedButton label={number} onTouchTap={() => {
            this.props.buttonClicked(this.props.number.toString(10));
        }}/>;
    }
}