NEWBIE Reaguj pytanie - mam dokładnie zdezorientowany, próbując podążać za doktorem.

Chcę, aby kliknąć przycisk Prosty tekst, wyświetla wartość wejściową poniżej formularza. Całkiem prosty, prawda?

To jest mój komponent do tej pory:

export default class TextInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(event) {
    event.preventDefault();
    this.setState({ value: event.target.value });
  }

  render() {
    return (
      <div>
      <form onSubmit={this.handleSubmit}>
        <label>
          <input type="text"  value='' />
        </label>
        <input type="submit" value="Submit" />
      </form>
      <p>{ this.state.value }</p>
      </div>
    );
  }
}

Jednak w ogóle nie działa - formularz nie wyświetla niczego, gdy typy użytkowników.

Co ja robię źle?

4
Richard 26 czerwiec 2017, 23:05

6 odpowiedzi

Najlepsza odpowiedź

Zmiany:

1

Sposoby korzystania z elementów:

Sterowany komponent: Zdefiniuj Onchange Nieruchomość funkcji i wartości i aktualizuj tę wartość w funkcji zmiany.

Niekontrolowany komponent: Nie definiuj Wartość właściwości, użyj ref, aby uzyskać wartość elementu.

2 Z elementem wejściowym, aby uzyskać jego wartość w onSubmit Funkcja.

Sprawdź to:

class TextInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(event) {
    event.preventDefault();
    this.setState({ value: this.element.value });
  }

  render() {
    return (
      <div>
      <form onSubmit={this.handleSubmit}>
        <label>
          <input type="text" ref={el => this.element = el} />
        </label>
        <input type="submit" value="Submit" />
      </form>
      <p>{ this.state.value }</p>
      </div>
    );
  }
}

ReactDOM.render(<TextInput/>, document.getElementById('app'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'/>
6
Mayank Shukla 26 czerwiec 2017, 20:23

Większość przykładów wydaje się być bardziej skomplikowana niż musi być. Ten przykład pochodzi z samouczki Reagation Codevolution:

https://www.youtube.com/watch?v=X9UEDRBLHJE.

class TextInput extends Component {
    constructor(props) {
        super(props)
        this.state = {
            mytext: "",
            value: ""
        }
    }

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

    submitHandler = (e) => {
        this.setState({
            value: this.state.mytext
        })
        e.preventDefault()
    }

    render() {
        return (
            <form onSubmit={this.submitHandler}>
            <label>
                <input
                name="mytext"
                type="text"
                value={this.state.mytext}
                onChange={this.changeHandler} />
            </label>
            <button
                onSubmit={this.submitHandler}
                type="submit">
                    Submit
                </button>
            <p>{ this.state.value }</p>
            </form>
        )
    }
}

Zmiany w form zaktualizuj pola state, więc po trafieniu, wszystko jest gotowe. Field input jest name d Łatwo jest je zmapować do ich {x4}}.

0
David Newcomb 16 maj 2020, 16:55

Nie działa dla mnie w ogóle !! Dopóki nie wyrzuciłem w setstate w samej onchange w formacie powrotu, patrz poniżej - Onchange = {E => to.setstate ({Nazwa: e.target.value})}:

import React, { Component } from 'react';
import logo from '../logo.svg';
import '../App.css';

export default class Dashboard extends Component {
constructor(props){
    super(props);
    this.state = {cakes: [], name: '', review: '', rating: ''}

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
}
componentDidMount() {
}//compdidmount

handleChange = (event) => this.setState({name: event.target.value, review: event.target.value,rating: event.target.value});

handleSubmit(e) {
    e.preventDefault();
    console.log('A name was submitted: ' + this.state.name + this.state.review + this.state.rating);

  }

  render() {

    const { state } = this;

 const numbers = [1, 2, 3, 4, 5];
 const listItems = numbers.map((number) =>
 // Correct! Key should be specified inside the array.
 <li key={number.toString()}
           value={number}> {number} </li>

);
    return (
      <div className="Dashboard">
        <header className="Dashboard-header">
                    Dashboard
          <h6 className="Dashboard-title">Items pulled from firebase</h6>
        </header>
        <p className="App-intro">
         Items
        </p>
        {listItems}

        <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={state.name} onChange={ e => this.setState({ name : e.target.value }) } />
        </label>
        <label>
          Review:
          <input type="text" value={state.review} onChange={ e => this.setState({ review : e.target.value }) } />
        </label>
        <label>
          Rating:
          <input type="text" value={state.rating} onChange={ e => this.setState({ rating : e.target.value }) } />
        </label>
        <input type="submit" value="Submit" />
      </form>
      </div>
    );
  }
}
0
monkeykid 28 czerwiec 2018, 11:02

Podczas korzystania z funkcji przesyłania uchwytu, Event.Target jest elementem formularza, który nie ma wartości, więc nic nie jest ustawione. "React Way" do obsługi tego jest użycie czegoś o nazwie "Sterowane wejściem". Spójrz na to, jak wdrożyłem je z kodem:

export default class TextInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: '',
      value: ''
    };
    this.handleSubmit = this.handleSubmit.bind(this);
    this.updateInput = this.updateInput.bind(this);
  }

  handleSubmit(event) {
    event.preventDefault();
    this.setState({ value: this.state.input });
  }

  updateInput(event) {
    this.setState({input: event.target.value});
  }

  render() {
    return (
      <div>
      <form onSubmit={this.handleSubmit}>
        <label>
          <input type="text"  value={this.state.input} onChange={this.updateInput} />
        </label>
        <input type="submit" value="Submit" />
      </form>
      <p>{ this.state.value }</p>
      </div>
    );
  }
}

Zwróć uwagę, zwłaszcza nowa wartość wejścia i procedura obsługi, którą dołączałem do niego.

0
mbehrlich 26 czerwiec 2017, 20:15

Problem jest w środku

<input type="text"  value='' />

Wyjmij wartość

<input type="text" />

"Wartość" ustawi treść na pustym łańcuchu na każdym renderowaniu

1
codemeasandwich 26 czerwiec 2017, 20:10

Musisz mieć kontrolowany wejście, zapiszełbyś wartość jako typy użytkowników w polu TextField, a następnie na przełomieniu można uzyskać dane stanowią stan.

export default class TextInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  onChange = (event) => this.setState({ value: event.target.value });

  handleSubmit(event) {
    event.preventDefault();
    //this.setState({ value: event.target.value });
    consoole.log(this.state.value);
  }

  render() {
    return (
      <div>
      <form onSubmit={this.handleSubmit}>
        <label>
          <input type="text" value={this.state.value} onChange={this.onChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
      <p>{ this.state.value }</p>
      </div>
    );
  }
}

Jest to konwencjonalny sposób uzyskania wejścia użytkownika, za pomocą sterowanego składnika.

2
Crysfel 26 czerwiec 2017, 20:12