ホーム>source

ボタンがクリックされた後に関数を呼び出そうとしていますが、これは可能ですが、引数を渡すのに問題があります。

これは私の最初のReactアプリですのでご容赦ください。

この部分では、「clickedQuickreply()」を呼び出すonClickイベントは機能しません。

「TypeError:未定義のプロパティ「値」を読み取れません」を起動します

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

それでは、たとえばそのような状況でどのように引数を渡すのですか? あなたの時間と忍耐に感謝します。

あなたの答え
  • 解決した方法 # 1

    あなたは onClick={clickedQuickreply(this.value)} を書くべきです  として onClick={clickedQuickreply} 。 Reactは event を渡すことで関数を実行します  内部的に引数としてのオブジェクト。

    ここでもう1つ気づいたのは、関数 clickedQuickreply をエクスポートする必要がないということです。 、これは onClick でアタッチすることで今やったように、コールバック関数としてプライベートに使用できるため  小道具。エクスポートせずに記述し、 showMessage 内で定義します  関数。

関連記事

  • 前へ java - JPAクエリ:サブクエリをグループ化条件に結合する
  • 次へ redisは大量のデータに適していますか?