come aggiornare correttamente setState cliccando su un pulsante in ReactJS

voglio cambiare lo stato cliccando su un pulsante in React. in sostanza sto cercando di aggiornare il valore del nome visualizzato nel mio div impostando this.state.name uguale a quello che viene digitato nella casella di testo.

cosa faccio di sbagliato qui?

non capisco neanche la differenza tra onClick = {() = > this.updateText ()} e onClick = e / o onClick =. forse è collegato a questo?

Form.Tsx

import React from 'react';

export default class Form extends React.Component<any, any> {

  constructor(props: any) {
    super(props);

    this.state = {
      title: "Enter a new name here",
      description: "Hola",
      textInput: null,
      name: this.props.name
    };
  }

  updateText() {
    this.setState({
      name: this.state.textInput
    });
  }

  render() {
    return (
      <div className="App">
        <div>{this.props.text} {this.state.name}</div>
        <div>{this.state.age}</div>
        <input type="text" placeholder={this.state.title}>{this.state.textInput}</input>
        <br />
        <button type="submit" onClick={() => this.updateText()}>Submit</button>
      </div>
    );
  }
}

Appp.tsx

import React from 'react';
import './App.css';
import Form from "./Form";

class App extends React.Component {
  render() {
    return (
      <div className="App">
        <Form text="Hello" age={22} name="Thomas"/> 
      </div>
    );
  }
}

export default App;

this.state.name appare vuoto o nullo quando si digita qualcosa e si fa clic sul pulsante submit.

EN From: How to update setState properly on click of a button in ReactJS

More similar articles:

13 Comments

  1. è necessario aggiungere un gestore di modifiche all’input stesso. il valore rimane nullo perché in realtà non si sta aggiornando stato come cambiamenti accadere. https://reactjs.org/docs/forms.html. anche gli ingressi non sono elementi di blocco. non hanno figli o equivalenti. sono auto chiusura.

  2. come @Alexander Staroselsky detto nel suo commento, si dovrebbe usare un onChange gestore per il vostro input. in questo modo è possibile aggiornare il textInput e impostare il valore name.

    {this.updateText()} non è un modo corretto di usare il gestore. se lo si usa così viene invocato su ogni rendering ma non con il click.

    onClick={this.updateText} Qui, è possibile utilizzare il riferimento di funzione e funziona. ma, o devi legarlo nel costruttore o definirlo come una funzione di freccia. potete vedere un esempio qui sotto.

    onClick={() => this.updateText()} Questa è una possibilità di usarlo. si utilizza qui una funzione freccia per il gestore. funziona anche senza collegare la funzione handler per this. ma, in questo modo la funzione handler viene ricreata con ogni rendering. evitare questo, se possibile.

    class App extends React.Component {
    render() {
    return (
    <div className="App">
    <Form text="Hello" age={22} name="Thomas"/>
    </div>
    );
    }
    }

    class Form extends React.Component {

    constructor(props) {
    super(props);

    this.state = {
    title: "Enter a new name here",
    description: "Hola",
    textInput: "",
    name: this.props.name
    };
    }

    updateText = () => {
    this.setState({
    name: this.state.textInput
    });
    }

    handleChange = (e) => this.setState({ textInput: e.target.value})

    render() {
    return (
    <div className="App">
    <div>{this.props.text} {this.state.name}</div>
    <div>{this.state.age}</div>
    <input value={this.state.textInput} onChange={this.handleChange} type="text" placeholder={this.state.title} />
    <br />
    <button type="submit" onClick={this.updateText}>Submit</button>
    </div>
    );
    }
    }

    const rootElement = document.getElementById("root");
    ReactDOM.render(<App />, rootElement);
    <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" />

    1. questo funziona! quello che trovo interessante sono i due modi diversi per farlo. a mio parere preferisco questo seguente approccio che è un leggero cambiamento sintattico rispetto a voi. ma almeno per me sembra essere un po ‘più conciso. mi chiedo se la performance è la stessa?

    2. updateText () {this.setState ({nome: this.state.textInput, textInput: “”});}

      handleChange (e: any) {this.setState ({textInput: e.target.value})}

    3. @MisterTams, con il vostro modo le funzioni del gestore verranno ricreate ad ogni rendering. potete leggere questa risposta per vedere la differenza. (a proposito, la risposta accettata è fuorviante, è possibile leggere i commenti). ma, per piccole applicazioni (voglio dire, se non ci sono così tanti componenti che hanno funzioni come quelle) le prestazioni saranno quasi le stesse.

    4. non sono ancora abbastanza sicuro di capire. quindi il frammento di codice non è il modo corretto per avvicinarsi a questo? è bene passare un handler come puntello dal componente Genitore al componente Bambino? la sintassi () = > mi confonde perché non vengo da uno sfondo React o JavaScript.

    5. il mio esempio è l’approccio giusto come il vostro ultimo code.Using {() => someFunc()} provoca una ricreazione in ogni rendering in quanto si utilizza una funzione di freccia nel handler.But {someFunc} è un esempio di utilizzo di riferimento e non innesca una ricreazione. il vostro esempio è anche OK in quanto si utilizzano le funzioni per il loro riferimento. l’unica differenza tra il vostro esempio e il mio è che si utilizzano funzioni regolari e li legano nel costruttore e io uso le funzioni delle frecce, quindi non c’è bisogno di legarli per il this context.So, ci sono diversi argomenti qui. ma, dopo un po ‘, capirete la differenza.

    6. quindi fondamentalmente il mio approccio leggermente diverso usando la funzione freccia nel gestore come OnChange = {(e) = > this.handle Change (e)} causerà una chiamata a questa funzione ogni volta che qualcosa in questo componente ha bisogno di ri-rendering. il tuo codice nella risposta che ho scelto come accettato farà lo stesso risultato, ma non chiamare il OnChange o onClick automaticamente ogni volta che qualcosa in questo componente ha bisogno di ri-rendering. pertanto, la risposta iniziale fa lo stesso effetto, ma è leggermente migliore in termini di prestazioni. questo è corretto? leggerò il link che hai fornito pure.

    7. non esattamente “chiamare” o “invocare”, ma una “ricreazione”. questo non influisce sul componente stesso ma innesca un rerender non necessario per i componenti del bambino. ho cercato di spiegare questo nel primo link che ho dato nel mio primo commento qui. quindi, oltre alla parola “chiamata”, state pensando bene. (a proposito, {someFunc()} richiama o chiama la funzione immediatamente, ma onClick handlers non funzionano in questo modo. quindi, non usate mai il gestore in questo modo.)

Leave a Reply

Your email address will not be published. Required fields are marked *