Saya baru di React dan saya mencoba mengubah status ketika pengguna mengetikkan beberapa nilai di inout. Untuk suatu alasan komponen tampaknya tidak berfungsi. Adakah yang bisa menjelaskan mengapa saya tidak berhasil mengimplementasikan fungsi ini? Terima kasih, Valentino

import React, { Component } from 'react';

class Stake extends Component {
    state = ({
        userStake: null
    });

    handleUserStake = (e) => {
        e.preventDefault();
        let newStake = e.target.value;
        this.setState({
            userStake: [...userStake, newStake]
        })
    }

    render() {
        return (
            <div>
                <form onSubmit={this.handleUserStake}>
                    <input
                        style={{
                            marginLeft: "40px",
                            width: "50px"
                        }}
                        type="text"
                        name="stake"
                        required
                    />
                </form>
            </div >
        );
    }
}

export default Stake;
0
Valentino De Vivo 12 Mei 2021, 17:35

5 jawaban

Jawaban Terbaik

Anda harus terlebih dahulu mendapatkan userStake dari negara bagian

handleUserStake = (e) => {
    e.preventDefault();
    let newStake = e.target.value;
    // you need to first get it from the state before updating
    const { userStake } = this.state;
    this.setState({
        userStake: [...userStake, newStake]
    })
}
0
Wai Ha Lee 12 Mei 2021, 19:04

Saya pikir saya menemukan solusinya. Masalahnya adalah saya harus menulis [...this.state.userStake, newStake]

0
Valentino De Vivo 12 Mei 2021, 15:39

Ini harus bekerja...

 state = {
    userStake: [],
  };

  handleUserStake = (e) => {
    e.preventDefault();
    let newStake = e.target.stake.value;
    this.setState((state) => ({
      userStake: [...state.userStake, newStake],
    }));
  };

Apa itu masalah? :-

  1. mendapatkan nilai Anda perlu menambahkan NAMA dari target yaitu form untuk mendapatkan nilai bidang. Suka ...
  • let newStake = e.target.stake.value;
  1. mendapatkan nilai state saat ini, Anda baru saja mendapatkan userStake entah dari mana sehingga memberikan kesalahan undefined.
  • this.setState((state) => ({ userStake: [...state.userStake, newStake], }));
  1. buat nilai default ke [] untuk userStake di state obj.
  • userStake: []
0
Jeel 12 Mei 2021, 15:17

Pertama, Anda harus membuat konstruktor untuk komponen Anda dengan status dan metode `handleUserStakez yang diikat.

Karena Anda sedang menunggu acara kirim dari formulir, Anda akan menggunakan referensi untuk input:

this.inputRef = React.createRef();
ref={this.inputRef}

Kode lengkap di sini:

class Stake extends Component {
  constructor(props) {
    super(props);
    this.state = {
      userStake: ""
    };
    this.handleUserStake = this.handleUserStake.bind(this);
    this.inputRef = React.createRef();
  }

  handleUserStake = (e) => {
    e.preventDefault();
    let newStake = this.inputRef.current.value;
    console.log("newStake", newStake);
    this.setState({
      ...this.state,
      userStake: newStake
    });
  };

  render() {
    return (
      <div>
        STATE: {this.state.userStake}
        <form onSubmit={this.handleUserStake}>
          <input
            style={{
              marginLeft: "40px",
              width: "50px"
            }}
            type="text"
            name="stake"
            required
            ref={this.inputRef}
          />
        </form>
      </div>
    );
  }
}
0
Bart Krakowski 12 Mei 2021, 14:49

Untuk menyelesaikan input terkontrol, Anda harus menambahkan properti value yang menunjuk ke status masing-masing, dan onChange yang akan menangani pembaruan statusnya. untuk onSubmit Anda, Anda menggunakan penangan lain khusus untuk itu. anda juga harus memperbaiki handleChange Anda untuk memperbarui nilainya dengan benar:

class Stake extends Component {
    state = ({
        userStake: [],
        input: ''
    });

    handleUserStake = (e) => {
        let input = e.target.value;
        this.setState({ input });
    }

    handleSubmit = () => {
        e.preventDefault();
        let newStake = this.state.input;
        this.setState({
            userStake: [...this.state.userStake, newStake],
            input: '',
        })
    }

    render() {
        return (
            <div>
                <form onSubmit={this.handleSubmit}>
                    <input
                        style={{
                            marginLeft: "40px",
                            width: "50px"
                        }}
                        type="text"
                        name="stake"
                        value={this.state.input}
                        onChange={this.handleUserStake}
                        required
                    />
                </form>
            </div>
        );
    }
}

export default Stake;
2
buzatto 12 Mei 2021, 15:01