Funcții handleChange() diferite pentru fiecare element din componentă? (React (Programare, Javascript, Reactjs, Redux)

Peter Zacharias a intrebat.

Aș dori să știu dacă aceasta este o bună practică sau dacă ar trebui mai degrabă să proiectez această aplicație în mod diferit. Mă preocupă în special cele două funcții „handleChange” și mă întreb dacă acest lucru ar putea fi simplificat cumva. Alte sfaturi sunt binevenite, bineînțeles.

user-add.js:

import React, {Component} from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import {createUser} from '../actions/index'

class UserCreate extends Component {

    constructor(props, context) {
        super(props, context);
        this.state = {
            inputText: 'Helluuuu'
        }
    }

    handleChangeFirstName(event) {
        console.log(event.target.value);
        this.setState({
            inputTextFirstName: event.target.value
        })
    }

    handleChangeLastName(event) {
        console.log(event.target.value);
        this.setState({
            inputTextLastName: event.target.value
        })
    }

    render() {
        return (
            <div>
                <h2> Add User </h2>

                <table className="userTable">
                <tbody>
                <tr>
                    <td>First Name:</td>
                    <td>Last Name:</td>
                </tr>

                <tr>
                    <td>
                        <input type="text"
                            placeholder="Hello!"
                            value={this.state.inputTextFirstName}
                            onChange={this.handleChangeFirstName.bind(this)}/>
                    </td>
                    <td>
                        <input type="text"
                            placeholder="Hello!"
                            value={this.state.inputTextLastName}
                            onChange={this.handleChangeLastName.bind(this)} />
                    </td>
                </tr>
                </tbody>
                </table>


                <button onClick={() =>this.props.createUser()}>Submit</button>

            </div>
        );
    }
}

function mapStateToProps(state) {
    return {
        user: state.activeUser
    };
}

function matchDispatchToProps(dispatch){
    return bindActionCreators({createUser: createUser}, dispatch);
}

export default connect(mapStateToProps, matchDispatchToProps)(UserCreate);

Comentarii

  • De ce ați inițializat starea inputText. Nu văd că este consumată nicăieri? –  > Por Umair Sarfraz.
  • ce vrei să spui mai exact? că am pus ‘Helluuu’ în textul de intrare în constructor? –  > Por Peter Zacharias.
  • oh, îmi pare rău, aveți dreptate, nu l-am redenumit în InputTextFirstName etc. Mulțumesc! –  > Por Peter Zacharias.
  • Nicio problemă. Am adăugat un răspuns. –  > Por Umair Sarfraz.
3 răspunsuri
Umair Sarfraz

Bineînțeles că puteți reduce acest lucru la unul singur handleChange metodă și puteți consuma oricâte câmpuri de intrare doriți cu acea singură metodă.

De asemenea, nu cred că aveți nevoie de niciun pachet terț pentru acest lucru.

În metoda dvs. de redare:

<input 
  type="text"
  name="firstName"
  placeholder="First Name!"
  value={this.state.firstName}
  onChange={this.handleChange.bind(this)}
/>

<input 
  type="text"
  name="lastName"
  placeholder="Last Name!"
  value={this.state.lastName}
  onChange={this.handleChange.bind(this)}
/>

Handle Change Method

handleChange(e) {
   this.setState({ [e.target.name] : e.target.value });
}

Mult mai curat.

Comentarii

  • Puteți explica această sintaxă? Este un pic cam greu de căutat pe Google. { [e.target.name] : e.target.value } Mulțumesc! –  > Por jacobra.
  • @jacobra Este vorba de atribuirea dinamică a cheilor obiectului. Orice ar fi e.target.name este, va deveni o cheie de obiect. –  > Por Umair Sarfraz.
kragovip

Atenție, casetele de verificare funcționează diferit!

De la Documentația React:

handleInputChange(event) {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;

    this.setState({
        [name]: value
    });
}

Mai concis:

handleInputChange({target}) {
    const value = target.type === 'checkbox' ? target.checked : target.value;
    this.setState({
        [target.name]: value
    });
}

Fabian Schultz

Două handleChange metode sunt bune și posibil utile dacă doriți să modificați cumva acele date în viitor înainte de a le trimite sau așa ceva. Dar este de înțeles că poate fi o mare bătaie de cap să creezi toate aceste metode pentru și mai multe câmpuri de formular. Din fericire, există așa-numitele ajutoare de legare în două direcții. Din câte am înțeles, acestea încă mai arată mixins în documentația React, așa că probabil că vă este mai bine să folosiți biblioteci terțe precum react-link-state:

import React from 'react';
import linkState from 'react-link-state';

export default MyForm extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      username: '',
      password: '',
      toggle: false
    };
  }

  render() {
    console.log(this.state);

    return (
      <form>
        <input type="text" valueLink={linkState(this, 'username')} />
        <input type="password" valueLink={linkState(this, 'password')} />
        <input type="checkbox" checkedLink={linkState(this, 'toggle')}
      </form>
    );
  }
}