Блог

Я создаю очень простое приложение, используя REACT, которое вызывает API и выдает случайную фразу. Всякий раз, когда я нажимаю на фразу, я хочу иметь доступ к выбранному слову, но я не мог понять, как это сделать (я прочитал много похожих сообщений, но даже с этим я не мог заставить это работать).

Это код

 import React, { Component } from "react";
import "./App.css";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { phrase: [] };
  }

  handlerApi = async () => {
    const api_call = await fetch(
      "https://api.whatdoestrumpthink.com/api/v1/quotes/random"
    );
    const data = await api_call.json();
    const phrase_array = data.message.split(" ");
    this.setState({ phrase: phrase_array });
  };
  handlerWordClicked = (word) => {
    console.log(word);
  };

  render() {
    let phrase = this.state.phrase.map((word) => word   " ");
    return (
      <div className="App">
        <div>
          <button onClick={this.handlerApi}>Call api</button>
          <div>
            {" "}
            <p onClick={(e) => this.handlerWordClicked(e.target)}>{phrase}</p>
          </div>
        </div>
      </div>
    );
  }
}

export default App;
  

Поместите каждое слово из состояния в <span> и прикрепите слушателя к каждому <span> :

 {
  this.state.phrase.map(word => (
    <span onClick={() => { console.log(word); }}>{word   ' '}</span>
  ))
}
  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js" crossorigin="anonymous"></script>
<div class='react'></div>
<script type='text/jsx'>
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { phrase: [] };
  }

  handlerApi = async () => {
    const api_call = await fetch(
      "https://api.whatdoestrumpthink.com/api/v1/quotes/random"
    );
    const data = await api_call.json();
    const phrase_array = data.message.split(" ");
    this.setState({ phrase: phrase_array });
  };
  handlerWordClicked = (word) => {
    console.log(word);
  };

  render() {
    let phrase = this.state.phrase.map((word) => word   " ");
    return (
      <div className="App">
        <div>
          <button onClick={this.handlerApi}>Call api</button>
          <div>
            {" "}
            <p>
              {
                this.state.phrase.map(word => (
                  <span onClick={() => { console.log(word); }}>{word   ' '}</span>
                ))
              }
            </p>
          </div>
        </div>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.querySelector('.react'));
</script>  

Вы получаете ссылку на HTMLParagraphElement DOM-объект, поэтому просто получите доступ к его innerHTML атрибуту.

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

Но если вы хотите сделать это более реактивным способом, просто сохраните и извлеките фразу в виде строки в состоянии компонента.

 class App extends Component {
  constructor(props) {
    super(props);
    this.state = { phrase: '' };
  }

  handlerApi = async () => {
    const api_call = await fetch(
      "https://api.whatdoestrumpthink.com/api/v1/quotes/random"
    );
    const data = await api_call.json();
    this.setState({ phrase: data.message });
  };

  handlerWordClicked = () => {
    console.log(this.state.phrase);
  };

  render() {
    const { phrase } = this.state;
    return (
      <div className="App">
        <div>
          <button onClick={this.handlerApi}>Call api</button>
          <div>
            {" "}
            <p onClick={(e) => this.handlerWordClicked(e.target)}>{phrase}</p>
          </div>
        </div>
      </div>
    );
  }
}