Próbuję stworzyć stałe w reakcji w następujący sposób:

const [firstFocus, setFirstFocus] = React.useState(false);
const [lastFocus, setLastFocus] = React.useState(false);

Stałe są używane w kodzie w następujący sposób:

import React, { Component } from 'react'
import axios from 'axios'

import {
    Button,
    Card,
    CardHeader,
    CardBody,
    CardFooter,
    Form,
    Input,
    InputGroupAddon,
    InputGroupText,
    InputGroup,
    Container,
    Col
} from "reactstrap";

class PostForm extends Component {
    constructor(props) {
        super(props)

        this.state = {
            email: '',
            password: ''
        }
    }

    changeHandler = (e) => {
        this.setState({ [e.target.name]: e.target.value })
    }

    submitHandler = (e) => {
        e.preventDefault()
        console.log(this.state)
        axios.post('https://jsonplaceholder.typicode.com/posts', this.state)
            .then(response => {
                console.log(response)
            })
            .catch(error => {
                console.log(error)
            })
    }


    render() {
        const { email, password } = this.state
        **const [firstFocus, setFirstFocus] = React.useState(false);
        const [lastFocus, setLastFocus] = React.useState(false);**
        return (

            <div>
                <Col className="ml-auto mr-auto" md="4">
                    <Card className="card-login card-plain">
                        <Form onSubmit={this.submitHandler} className="form">
                            <CardHeader className="text-center">
                            </CardHeader>
                            <CardBody>
                                <InputGroup
                                    className={
                                        "no-border input-lg"
                                    }
                                >
                                    <InputGroupAddon addonType="prepend">
                                        <InputGroupText>
                                            <i className="now-ui-icons ui-1_email-85"></i>
                                        </InputGroupText>
                                    </InputGroupAddon>
                                    <Input
                                        placeholder="Email"
                                        type="text"
                                        name="email"
                                        value={email}
                                        onChange={this.changeHandler}
                                    // onFocus={() => setFirstFocus(true)}
                                    // onBlur={() => setFirstFocus(false)}
                                    ></Input>
                                </InputGroup>
                                <InputGroup
                                    className={
                                        "no-border input-lg"
                                    }
                                >
                                    <InputGroupAddon addonType="prepend">
                                        <InputGroupText>
                                            <i className="now-ui-icons ui-1_lock-circle-open"></i>
                                        </InputGroupText>
                                    </InputGroupAddon>
                                    <Input
                                        placeholder="Password"
                                        type="password"
                                        name="password"
                                        value={password}
                                        onChange={this.changeHandler}
                                    // onFocus={() => setLastFocus(true)}
                                    // onBlur={() => setLastFocus(false)}
                                    ></Input>
                                </InputGroup>
                            </CardBody>
                            <CardFooter className="text-center">
                                <Button
                                    block
                                    className="btn-round"
                                    color="info"
                                    type="submit"
                                    size="lg"
                                >
                                    Get Started
                    </Button>
                                <div className="pull-right">
                                    <h6>
                                        <a
                                            className="link"
                                            href="#pablo"
                                            onClick={e => e.preventDefault()}
                                        >
                                            Need Help?
                        </a>
                                    </h6>
                                </div>
                            </CardFooter>
                        </Form>
                    </Card>
                </Col>
            </div>
        )
    }
}

export default PostForm

Jednak gdy próbuję to zrobić, pojawia się następujący błąd:

Nieprawidłowe połączenie z podniesioną słuchawką. Hooki można wywoływać tylko wewnątrz ciała składnika funkcji.

Utworzyłem tam kolejną stałą dla adresu e-mail i hasła i działała dobrze, więc nie jestem pewien, dlaczego moje stałe useState nie działają. Każda pomoc lub wskazówki są bardzo mile widziane, ponieważ jestem bardzo nowy w reagowaniu. Dzięki!

13
youngdev 1 kwiecień 2020, 01:44

4 odpowiedzi

Najlepsza odpowiedź

W reakcji mamy 2 sposoby budowania komponentów: klasy i funkcje.

DOCS

Hooki to nowy dodatek w React 16.8. Pozwalają ci używać stanu i innych funkcji Reacta bez pisania klasy.

Korzystanie z hooka stanu:

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Przykład klasy równoważnej:

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}
13
Esther-I 3 październik 2020, 21:51

Haczyki mogą być używane tylko w komponentach funkcjonalnych, używasz komponentu klasy.

Aby uzyskać więcej informacji i jak to wdrożyć, przeczytaj ten artykuł Link

1
Hasan Zahran 31 marzec 2020, 23:01

Próbujesz użyć useState, który jest punktem zaczepienia React, wewnątrz komponentu klasy. To nie zadziała. Haczyki można stosować tylko w elementach funkcjonalnych.

3
Edgar Cuarezma 31 marzec 2020, 22:51

Oficjalnie nie możesz używać hooka na komponencie klasowym. Ale oczywiście jest pewna sztuczka, jeśli chcesz użyć useState na komponencie klasy

Przykład, nie możesz tego zrobić

class Example extends React.Component {

  _renderCounter = () => {
    //
    // YOU CAN'T DO THIS
    // REACT WONT ALLOW YOU
    //
    const [count, setCount] = useState(0);
    return <div>{ count }</div>
  }

  render() {
    return(
      <div>{ this._renderCounter() }</div>
    );
  }
}

Ale dzięki małej sztuczce możesz to zrobić. React ci pozwoli

class Example extends React.Component {

  _renderCounter = () => () => {
    const [count, setCount] = useState(0);

    return <div>{ count }</div>
  }

  render() {
    const MyInlineHook = this._renderCounter();

    return(
      <div><MyInlineHook /></div>
    );
  }
}

Dzięki tej sztuczce możesz uzyskać dostęp do this i props składnika klasy. :)

2
Nadiar Syaripul 24 sierpień 2020, 16:00