时间戳

首页 > 解决方案 > 反应中的 onChange

javascript - 反应中的 onChange

问题描述

我无法用 更新我的customerContact状态handleChange。事实上，我使用该updateContact功能来检索客户的 ID，以便能够修改他们的联系方式。但是，当我得到 id 时，我觉得我正在阻止状态更新。所以我无法编辑联系人字段。

有人可以帮我吗？

class DetailsCustomer extends React.Component{

    constructor (props) {
   
        super(props)
        this.handleChange = this.handleChange.bind(this);
        this.toggle = this.toggle.bind(this);
        this.toggle1 = this.toggle1.bind(this);
        this.state = {
            id: props.match.params,
            customers: [],
            customerContact: {},
            customerContacts: [],
            customerAddresses: [],
            genders: [],
            contactTypes: [],
            addressTypes: [],
        };
    }

  updateContact = (id, index) => {
        this.setState({
            customerContact: this.state.customerContacts[index],
        }, () => {
            console.log("update-contact: ", this.state.customerContact);
   })

  handleChange = async ({currentTarget}) => {
         const {name, value} = currentTarget;
         this.setState({...this.customerContact, [name]: value});
     }
  
render() {
const { id, customerContacts, customerContact, genders, name } = this.state;
   return(
         <div className="form-group col-md-12">
           <Field name="lastName" label="Nom" placeholder="Nom" value= 
            {this.state.customerContact.lastName} onChange={this.handleChange.bind(this)} />
         </div>
)}

字段.jsx

import React from 'react';

const Field = ({name, label, value, onChange, placeholder = "", type = "text", error = "" }) => (
    <div className="form-group">
        <label htmlFor={name}>{label}</label>
        <input
            value={value}
            onChange={onChange}
            type={type}
            placeholder={placeholder || label}
            name={name}
            id={name}
            className={"form-control" + (error && " is-invalid")}
        />
        {error && <p className="invalid-feedback">{error}</p> }
    </div>
);

export default Field;

标签： javascriptreactjs

解决方案

你说handleChange需要得到一个对象，但是当你调用handleChange时你没有给它。我认为这可能会有所帮助。如果你使用箭头函数 => 你不需要在函数上使用 this.bind

class DetailsCustomer extends React.Component{

    constructor (props) {
   
        super(props)       
        this.toggle = this.toggle.bind(this);
        this.toggle1 = this.toggle1.bind(this);
        this.state = {
            id: props.match.params,
            customers: [],
            customerContact: {},
            customerContacts: [],
            customerAddresses: [],
            genders: [],
            contactTypes: [],
            addressTypes: [],
        };
    }

  updateContact = (id, index) => {
        this.setState({
            customerContact: this.state.customerContacts[index],
        }, () => {
            console.log("update-contact: ", this.state.customerContact);
   })

  handleChange = async (e) => {         
         this.setState({customerContact: e.target.value});
     }
  
render() {
const { id, customerContacts, customerContact, genders, name } = this.state;
   return(
         <div className="form-group col-md-12">
           <Field name="lastName" label="Nom" placeholder="Nom" value= 
            {this.state.customerContact} onChange={(e)=>this.handleChange(e)} />
         </div>
)}

推荐阅读