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>

Answer 3

为什么不把它硬编码为变量并传递变量？

render () {
  var buttonText = "General";
  return (
    <button id="gnrl"  onClick={() => this.selectChannel(buttonText)}>{buttonText}</button>
  )
}

Answer 4

我认为我没有足够的信息，但是我在这里：我认为如果在该组件中定义了文本，我应该将文本保留在组件的状态中。

如果文本可以以某种方式在祖先组件中生成，则应该在此类组件的状态下定义它，并将其作为prop传递给包含该按钮的组件。

Answer 5

我不确定这是好事还是坏事，但是可以使用e.target.firstChild.data或e.target.lastChild.data

Answer 6

您可以通过组件的道具获得按钮文本。 <Button className="btn btn-primary" onClick={this.onClick} >Buttonone</Button>

<button className={props.className} onClick={props.onClick}> {props.children} </button> 这样，您可以将Button InnerHtml值获取到组件

Answer 7

<button onClick={e => alert(e.target.innerText)}>General</button>

传递React按钮文本值

7 个答案: