Question

我试图在单击按钮后调用一个函数，到目前为止，这是可能的，但是在传递参数方面存在问题。

这是我的第一个React App，请耐心等待。

在这一部分中，调用“ clickedQuickreply（）”的onClick事件将无法正常工作

它会引发“ TypeError：无法读取未定义的属性'value'”

export function showMessage() {
  console.log("Show Message");

  let timeStamp = messages.giveTimestamp("not set");
  let listItems = messageList.map(d => (
    <p className={d.senderId} key={d.senderId}>
      {" "}
      {d.text}{" "}
    </p>
  ));

  let listreply = quickReplyList.map(d => (
    <button
      className="quickReplyButton"
      key={d.id}
      value={d.qrText}

      **onClick={clickedQuickreply(this.value)}**
    >

      <span> {d.qrText} </span>
    </button>
  ));

  return (
    <div>
      <div className="timestamp">{timeStamp}</div>
      <ul>{listItems}</ul>
      <div className="quickreply">{listreply}</div>
    </div>
  );
}
export function clickedQuickreply(e) {
  console.log("Clicked", e);
  quickReplyList.length = 0;
  //send.sendMessageToServer(query);
}

这是它呈现的代码。将App.js命名为“ main” 通常我想在每次获取请求完成时进行重新渲染，但是我对React的理解还不算什么。

class MessageDisplay extends React.Component {
  constructor(props) {
    super(props);
    this.state = null;
  }

  componentDidMount() {
    window.addEventListener("click", this.tick.bind(this));
    window.addEventListener("keypress", this.tick.bind(this));
  }

  componentWillUnmount() {
    window.removeEventListener("click", this.tick.bind(this));
    window.removeEventListener("keypress", this.tick.bind(this));
  }
  componentDidUpdate() {}

  tick() {
    this.forceUpdate();
  }

  render() {
    setTimeout(() => {
      this.forceUpdate();
    }, 2000);
    return (
      <div className="chatBox">
        <ui.showMessage />
      </div>
    );
  }
}

例如，在这种情况下如何传递参数？感谢您的时间和耐心。

Answer 1

您应将onClick={clickedQuickreply(this.value)}写为onClick={clickedQuickreply}。 React将通过向内部传递event对象作为参数来执行该函数。

我在这里要注意的另一件事是，您无需导出函数clickedQuickreply，因为可以像现在通过将其附加到onClick道具一样将其私有用作回调函数。因此，无需导出就可以编写它，并在showMessage函数中定义它。

React Button onClick传递参数

1 个答案: