CODEWITHSUNDEEP
reactjsreact-hooks
Mizy
Mizy

Reputation: 69

onChange is not getting the disabled input value to state

Hi i am trying to pass a custom value created from a state and adding them to the xero_code input value as shown below.

<input
  className="form-control"
  type="text"
  name="xero_code"
  onChange={(e) =>
    handleChangeLevel3(
      e,
      i,
      index,
      "product_information",
      "order_list_products"
    )
  }
  value={
    spreadList.machine +
    "" +
    data.product_name +
    "" +
    spreadList.spreadRate +
    "." +
    spreadList.location
  }
  defaultvalue={"inputValue"}
  placeholder="Xero Code"
  disabled 
/>;

Below i have added the onChange event

const handleChangeLevel3 = (e, i, j, arrayname, arrayname2) => {
    setDirty()
    const { name, value } = e.target
    const list = { ...inputList }

    list[arrayname][i][arrayname2][j][name] = value
    setInputList(list)
    handleXeroCode()
  }

The value changes as expected but it's not being added to the state object! The onChange is not triggering the event!

But if i to remove disabled attribute and type over it the value updates the state. How can i trigger the onChange and make this work?

Below i have added the structure of my State!

enter image description here

Upvotes: 0

Views: 842

Answers (1)

Abid Hussain
Abid Hussain

Reputation: 36

Use following code for "handleChangeLevel3"


const handleChangeLevel3 = (e, i, j, arrayname, arrayname2) => {
    setDirty()
    const { name, value } = e.target
    let list = { ...inputList }
    let newObj = { ...list[arrayname][i][arrayname2][j], [name]: value }
    let newArrName2 = [...list[arrayname][i][arrayname2]]
    newArrName2[i] = { ...newObj }
    let newArrName = [...list[arrayname]]
    newArrName[i] = { ...newArrName2 }
    list = { ...list, [arrayname]: [...newArrName] }
    setInputList(list)
    handleXeroCode()
  }

here you need to use deep copy to change value. In your case react didn't detect change. as it use virtual dom and compare it with real dom but sometimes at this level of change you need to use deep copy concept instead of shallow copy.

Upvotes: 1

Related Questions