по щелчку я хочу сгенерировать оповещение в методе react js

#reactjs

Вопрос:

Это мой код:

 generateAlert = () => {
    alert('hi');
}

return <Tile
    click={(index)=>{this.generateAlert}}
    title={tile.title} 
    value={tile.value}
    key={tile.id}
/>

Это ошибка, которую я получаю:

Ожидалось назначение или вызов функции, а вместо этого появилось выражение no-unused-expressions Для поиска ключевых слов, чтобы узнать больше о каждой ошибке.

Ответ №1:

Во-первых, мне интересно, есть ли в вашем компоненте массив Tile данных, и вы хотите отобразить Tile для каждой записи массива (я так подумал, потому что вы добавили key prop в Tile ).).

В любом случае, я создал пример, аналогичный тому, чего вы хотите достичь, и он работает. Посмотрите на это:

 const Tile = (props) => {
    return (
        <div className="Tile">
            <h3>{props.title}</h3>
            <div onClick={props.click}>
                {props.value}
            </div>
        </div>
    );
}

class App extends React.Component {
    constructor(props) {
        super(props);
    }
    
    generateAlert = () => {
        alert("Hi");
    }
    
    render() {
        return (
            <Tile
                click={this.generateAlert}
                title={"This isa a Title"}
                value={"This is the value"} />
        );
    }
}

ReactDOM.render(<App />, document.getElementById('root'));

 @import url(https://fonts.googleapis.com/css?family=Montserrat);

body {
    font-family: 'Montserrat', sans-serif;
}

 <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>

<div id='root'></div>

Теперь я могу помочь вам более глубоким способом, если вы опубликуете код компонента, который хочет отображать Tile ; возможно, в этом есть какая-то ошибка.

1. Большое спасибо, Джолли

2. Пожалуйста. Хотя, если вы исправили проблему (вы сказали, что предупреждение не было показано), объясните, в чем была ошибка: будущие пользователи могут оказаться здесь, и им понадобится эта информация 🙂

Ответ №2:

Hei!

Если это вызов функции внутри onClick функции вашего компонента, вам нужно добавить () after this.generateAlert в вашем компоненте

Итак, это будет похоже:

 return <Tile
  click={(index)=>{this.generateAlert()}}
  title={tile.title} 
  value={tile.value}
  key={tile.id}
/>

В противном случае вы можете использовать свою функцию как onClick обратный вызов как таковой.

В этом случае вам нужно, чтобы это было так:

 return <Tile
  onClick={this.generateAlert}
  title={tile.title} 
  value={tile.value}
  key={tile.id}
/>

Приветствия!

1. Что именно Tile ? Потому что второй пример должен сработать, если вы напишете onClick вместо click

2. const tile = (props) => { return ( <div className=»Плитка»> <h3>{props.title}</h3> <div onClick={props.click}> {props.value} </div> </div> ); };

Ответ №3:

Я сделаю таким образом:

Вопрос: почему я экспортирую плитку в новый компонент?

A: Поскольку каждый компонент должен быть как можно короче. У этого способа есть много преимуществ, например: «легко находить ошибки (тестирование)».

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

class App extends Component {
  constructor(props) {
    super(props);
    this.generateAlert = this.generateAlert.bind(this);
  }

  generateAlert = () => {
    alert("Hi");
  };

  render() {
    return (
      <Tile
        click={this.generateAlert}
        title={"This isa a Title"}
        value={"This is the value"}
      />
    );
  }
}

export default App;

и файл Tile.js:

 import React, { Component } from "react";

export default class Tile extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <button onClick={this.props.click}>click me</button>
        <p>{this.props.title}</p>
        <p>{this.props.value}</p>
      </div>
    );
  }
}

Этот файл Tile.js готовы к будущим дополнениям, но если вы хотите использовать только то, что есть сейчас, я бы рекомендовал перейти на компонент без состояния:

 import React from "react";

const Tile = props => {
  return (
    <div>
      <button onClick={props.click}>click me</button>
      <p>{props.title}</p>
      <p>{props.value}</p>
    </div>
  );
};

export default Tile;