传递 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 这将是传递的值。有任何想法吗？

原文由 The worm 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我不确定这是否是您想要实现的目标，但您可以创建组件来呈现 <button> 以及作为道具传递的任何文本。

零件：

 <ButtonComponent text="General" />

组件的定义：

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

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

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

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

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

原文由 Radek Kowalewski 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

你可以使用目标

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

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

原文由 Fabio Campinho 发布，翻译遵循 CC BY-SA 3.0 许可协议