传递React按钮文本值

Question

说我有这段代码：

<button id="gnrl"  onClick={() => this.selectChannel()}>General</button>

如何传递文本General作为参数？即grep 2个按钮标签之间的所有文本？

我有一个功能可以做到这一点：

  selectChannel = (channelValue) => {
    var x = document.getElementById("general").value;
    this.setState({ channelValue: x })
  }

但我不想获取值，因为它必须是硬编码的属性。我希望能够更改General为其他任何Random值，例如，这将是传递的值。有任何想法吗？

Answer 1

我不确定这是否是您想要实现的，但是您可以创建一个组件，该组件将<button>使用作为道具传递的任何文本进行渲染。

零件：

<ButtonComponent text="General" />

组件的定义：

const ButtonComponent = (props) => {
  const handleClick = () => {
    console.log(props.text);
  };

  return (
    <button onClick={ handleClick }>{ props.text }</button>
  );
};

UPDATE（类符号中的相同组件）：

export default class ButtonComponent extends React.Component {
    handleClick = () => {
        console.log(this.props.text);
    }

    render() {
        return (
            <button onClick={ this.handleClick }>
                { this.props.text }
            </button>
        );
    }
}

Answer 2

您可以使用目标

selectChannel = (e) => {
    console.log(e.target.innerHTML);
}

<button onClick={(e) => this.selectChannel(e)}>General</button>