3
votes

Comment gérer plusieurs fonctions onChange à partir de plusieurs champs d'entrée dans Reactjs

J'ai un formulaire qui a 5 champs de type de texte d'entrée et un champ de type de fichier d'entrée. J'ai utilisé la fonction onChange.

c'est le formulaire

constructor(props){
        super(props);
        this.state = {
            companyName : '',
            AccountName : '',
            bankName : '' , 
            bankBookCpy : '' ,
            accountNo : '' ,
            branch : '' , 
            BankList : '',
            selectedFile : null,
        }
    }

    fileSelectedHandler = event =>{
        this.setState({
            selectedFile: event.target.files[0]
        })

    }
    handleChange = event => {
        this.setState({ 
            companyName: event.target.value,
            AccountName: event.target.value,
            bankName: event.target.value,
            accountNo: event.target.value,
            branch: event.target.value
         });

    }
    fileUploadHandler = () => {
        const fd = new FormData();
        fd.append('image',this.state.selectedFile, this.state.selectedFile.name )
        axios.post('http://localhost:3000/api/attachmentBanks/bankBookCpy/upload',fd , {
            onUploadProgress : ProgressEvent => {
                console.log('Upload Progress: ' + Math.round(ProgressEvent.loaded / ProgressEvent.total *100) + '%')
            }
        })
        .then(res => {
            this.setState({
                BankList: res.data.result.files.image[0].name,
            });

        });
    }

    AddMeetup(newMeetup){
        axios.request({
            method:'post',
            url:'http://localhost:3000/api/companyBankDetails',
            data : newMeetup
        }).then(response => {
            this.props.history.push('/');
        }).catch(err => console.log(err));
    onSubmit(e){
        const newMeetup = {
            companyName: this.state.companyName,
            AccountName : this.state.AccountName,
            bankName : this.state.bankName,
            branch : this.state.branch,
            accountNo : this.state.accountNo,
            bankBookCpy : this.state.BankList
        }
        this.AddMeetup(newMeetup);
        e.preventDefault();
    }

maintenant mon problème est de savoir quel est le dernier message rempli dans mon API. J'ai utilisé AXIOS pour la requête HTTP. J'ai utilisé le connecteur de stockage pour télécharger des images

ci-dessous, j'ai mentionné ma fonction onChange

<form onSubmit ={this.onSubmit.bind(this)} >
            <FormGroup bssize="sm">
                <input onChange={this.handleChange} className="form-control" type="text" placeholder="Company Name" name="companyName" ref="companyName"/>
            </FormGroup>
            <FormGroup bssize="sm">
                <input onChange={this.handleChange} className="form-control" type="text" placeholder="Account Name" name="AccountName" ref="AccountName" />
            </FormGroup>
            <FormGroup bssize="sm">
                <input onChange={this.handleChange} className="form-control" type="text" placeholder="Bank Name" name="bankName" ref="bankName"/>
            </FormGroup>
            <FormGroup bssize="sm">
                <input onChange={this.handleChange} className="form-control" type="text" placeholder="Branch" name="branch" ref="branch"/>
            </FormGroup>
            <FormGroup bssize="sm">
                <input onChange={this.handleChange} className="form-control" type="text" placeholder="Account Number" name="accountNo" ref="accountNo"/>
            </FormGroup>
<FormGroup>

            <span>Bank Book Copy</span>  &nbsp; 
            <input style={{display :'none'}} type="file" onChange={this.fileSelectedHandler} ref={fileInput => this.fileInput = fileInput } />
            <Button onClick={()=>this.fileInput.click()} >
                  <Icon type="upload" /> Click to upload
            </Button>
            </FormGroup>
                <input onClick={this.fileUploadHandler} className="btn btn-primary" bsstyle="success" name="submit" type="submit" value="Submit" />
            </form>

Les fonctions ci-dessus ne sont stockées que la dernière valeur onChange

reactjs

0 commentaires

4 Réponses :

5
votes

Vous pouvez le gérer comme ceci:

  handleChange = event => {
    this.setState({ [event.target.name]: event.target.value });
  };

0 commentaires

2
votes

Commencez par modifier la fonction de changement de la fonction de la manière suivante:

<form onSubmit ={this.onSubmit.bind(this)} >
    {
        Object.entries({
            "Company Name": "companyName",
            "Account Name": "AccountName",
            "Bank Name": "bankName",
            "Branch": "branch",
            "Account Number": "accountNo"
        }).map(([field, name]) => 
        <FormGroup bssize="sm" key={name}>
                <input onChange={this.handleChange(name)} className="form-control" type="text" placeholder={field} name={name} ref={name}  />
        </FormGroup>)
    }
<FormGroup>

Ensuite, envoyez votre argument de nom à la fonction onChange :

handleChange = name => event => {
    this.setState({ [name]: event.target.value} );
}

2 commentaires

monsieur, le truc, c'est que je dois aussi gérer le téléchargement d'images. Comment puis-je?

Vous allez avoir besoin d'une entrée de type "fichier", vous trouverez toutes les infos sur l'image dans la variable event.target.value. vous pouvez ajouter le type d'entrée à chaque champ dans le JSON que j'ai créé

1
votes

Comme l'a répondu SakoBu, l'approche résoudrait votre problème. Une chose que j'ai remarquée est que vous attribuez une référence à chaque champ de saisie, vous n'avez pas besoin de le faire.

N'oubliez pas que si le type d'entrée est checkbox, radiobutton vous obtiendrez la valeur correspondante par event.taget.checked.

C'est toujours une bonne pratique de vérifier le type d'événement, par event.target.type.

Pour plus de détails, visitez: - https://reactjs.org/docs/forms.html

J'espère que cela vous aidera,

Vive !!

0 commentaires

1
votes

Ici, votre problème est que vous appelez la même fonction handleChange () sur chaque événement onChange. supposons que vous modifiez le champ de saisie "nom de la société". Lorsque vous le modifiez, vous appelez la fonction handleChange () . Ensuite, dans cette fonction, vous attribuez event.target.value à tous les champs (companyName, AccountName, etc.). Mais event.target.value ne vous donne que les données du champ que vous modifiez pour appeler la méthode handleChange () , dans ce cas, il s'agit de "nom de l'entreprise" contribution. Cela remplacera donc tous les états de données de votre formulaire par le texte que vous avez entré dans "Nom de l'entreprise".

Donc, le plus dur est que vous pouvez créer des fonctions séparées pour gérer chaque champ d'entrée. Mais ce n'est pas une bonne pratique. Au lieu de cela, vous pouvez suivre la réponse de SakoBu.

cette méthode prendra le nom d'état de event.target.name et les données d'état de event.target.value . Donc, si vous modifiez la valeur de "Nom de l'entreprise", votre code de mise à jour d'état dans handleChange () sera le même que companyName: event.target.value, mais ne changera que État de CompanyName, pas d'autres états de formulaire.

Vous n'avez pas à vous soucier du système de téléchargement d'images. Parce que vous pouvez utiliser votre méthode fileUploadHandler () existante pour gérer les modifications du téléchargement du fichier.

0 commentaires