从 onTouchTap 事件中获取值

Question

收到 class 并 return 向家长发送了一个事件。我想获得触摸的按钮编号（raisedbutton 上的标签）。我做了 return 活动，但是当我 console.log() 它时我找不到我想要的东西。它包含一个 Handler（对象）、Target（SyntheticUIEvent）和 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 1

onTouchTapEvent.target 应该是按钮元素，您应该能够从中获取标签（您需要将其转换为 any）。

但我认为这样更好：

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

从 onTouchTap 事件中获取值

Get value from onTouchTap event

typescript

reactjs

material-ui