CODEWITHSUNDEEP
reactjstypescriptmaterial-ui
thatsIT
thatsIT

Reputation: 2175

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}/>;
    }
}

Upvotes: 0

Views: 1234

Answers (1)

Nitzan Tomer
Nitzan Tomer

Reputation: 164307

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));
        }}/>;
    }
}

Upvotes: 1

Related Questions