web-dev-qa-db-fra.com

React Elément d'entrée: valeur vs valeur par défaut

je suis nouveau dans React et REDUX, je viens de développer une application de réaction simple, et maintenant je suis confronté à un problème, lorsque je présente un élément d'entrée dans mon composant si je définis l'élément "value" it devenir en lecture seule, mais si je mets la valeur sur "defaultValue", il ne sera plus jamais mis à jour lorsque je mets à jour mon état.

Voici mon code:

    import React from "react";
    export default class EditForm extends React.Component {

    editTransaction(event) {

        var transaction = this.props.transaction;

        event.preventDefault();
        var NewTransaction = {
            transactions_data: {
                amount: this.refs.amount.value
            }
        }

        this.props.editTransaction(NewTransaction, transaction.id);
    }

    closeForm() {
        this.props.closeForm();
    }

    render() {
        var {amount}=this.props.transaction;
        return (
            <div>
                <br/>
                <h4>Edit Transaction</h4>
                <div className="btn btn-danger pull-right" onClick={this.closeForm.bind(this)}>close</div>
                <div className="clearfix"></div>
                <form onSubmit={this.editTransaction.bind(this)}>
                    <div>
                        <label for="amount">Amount</label>
                        <input value={amount} onChange={(value) => this.onChange(value)} className="form-control"
                               id="amount" name="amount" type="number"
                               ref="amount"/>
                    </div>
                    <br/>
                    <br/>
                    <input className="btn btn-info" type="submit" value="submit"/>
                </form>
            </div>
        );
    }
}

et puis j'ai découvert si je fais une erreur en ajoutant onChange={(value) => this.onChange(value)} sur mon élément d'entrée, cela fonctionne correctement (il met à jour pendant que les propriétés ou l'état est mis à jour, et je peux retaper la valeur) , mais je pense que ce n’est pas une solution appropriée, car cela provoque des erreurs sur la console de mon navigateur. C'est parce que la fonction "this.onChange" n'existe pas.

s'il vous plaît, aidez-moi à résoudre ce problème et merci d'avance

Cordialement,

Vidy

javascriptreactjsfrontend
21
vidihermes

La raison pour laquelle votre entrée ne fonctionne pas est parce que vous avez besoin de define la fonction onChange qui en réalité sets the state avec la valeur mise à jour. Vous pouvez probablement le faire en ligne car il n’a besoin que d’une déclaration comme

<input type="text" value={this.state.inputVal} onChange={(e) => {this.setState({inputVal: e.target.value})}} />

Cependant, je vous recommanderais d'utiliser une méthode onChange, car vous pouvez gérer plusieurs entrées avec elle et elle a l'air plus propre.

class EditForm extends React.Component {

    constructor() {
        super();
        this.state = {
        
        }
    }
    onChange(e) {
         this.setState({[e.target.name]: e.target.value})
    }
    editTransaction(event) {

        var transaction = this.props.transaction;

        event.preventDefault();
        var NewTransaction = {
            transactions_data: {
                amount: this.refs.amount.value
            }
        }

        this.props.editTransaction(NewTransaction, transaction.id);
    }

    closeForm() {
        this.props.closeForm();
    }

    render() {
       
        return (
            <div>
                <br/>
                <h4>Edit Transaction</h4>
                <div className="btn btn-danger pull-right" onClick={this.closeForm.bind(this)}>close</div>
                <div className="clearfix"></div>
                <form onSubmit={this.editTransaction.bind(this)}>
                    <div>
                        <label for="amount">Amount</label>
                        <input value={this.state.amount} onChange={(value) => this.onChange(value)} className="form-control"
                               id="amount" name="amount" type="number"
                               ref="amount"/>
                         <input value={this.state.amount1} onChange={(value) => this.onChange(value)} className="form-control"
                               id="amount1" name="amount1" type="number"
                               ref="amount"/>
                    </div>
                    <br/>
                    <br/>
                    <input className="btn btn-info" type="submit" value="submit"/>
                </form>
            </div>
        );
    }
}

ReactDOM.render(<EditForm/>, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react-dom.min.js"></script>
<div id="app"></div>
19
Shubham Khatri

Si vous utilisez redux, vous devez définir une méthode onChange qui pourrait être une action mettant à jour l'état de votre composant via un réducteur. Une méthode plus simple utilisant un état simple avec es6 est présentée ci-dessous. De plus, vous obtenez la valeur du champ de saisie via ref, ce qui est déconseillé par Facebook. Cela devrait également vous donner une erreur parce que vous essayez de contrôler et composant non contrôlé.

Voici un lien vers la documentation du formulaire pour en savoir plus.

class Foo extends React.Component { 
  constructor(props) {
    super(props);
    this.state = ({
      inputVal: '',
    });
  }
  onChange = (e) => {
    this.setState({ [e.target.name]: e.target.value });
  }
  handleSubmit = (event) => {
    event.preventDefault();
    console.log(this.state.inputVal);
  }
  render() {
    return (
      <div>
        <input type="text" value={this.state.inputVal} onChange={this.onChange} />
      </div>
    );
  }
}
3
Turtle