javascript - 输入不允许更改更改中的值

Question

我正在尝试修改更改事件中的输入值，但它不允许我这是我的代码

<Input type="text" name="traMake" required value={truckEdit.tra.traMake} onChange={ingresarValoresMemoria} id="idMake" placeholder="Campo obligatorio" />

但是当通过 value = {truckEdit.tra.traMake} 修改值时，如果它允许我修改它但我的实体具有这种结构

const [truckEdit,setTruckEdit]= useState({
        truId           :'',
        driId           : '',
        TruExdate       : '',
        TruAddress      : '',
        tra             : ({
            traMake     : '',
            traOption   : '',
            traUnit     : '',
        }),
        TraUnit         : '',
        TraOption       : '',
        truDocurl       : '' 
    });

有什么方法可以保持结构并能够避免输入阻塞

标签： javascriptreactjsreact-hooks

Answer 1

最简单的方法是使用 Object Spread。

请参阅下面的代码

  function handleTraMakeChange(newValue) {
    setTruckEdit({
      ...truckEdit,
      tra: {
        ...truckEdit.tra,
        ["traMake"]: newValue
      }
    });
  }

  return (
    <div className="App">
      <input
        type="text"
        name="traMake"
        required
        value={truckEdit.tra.traMake}
        onChange={(e) => handleTraMakeChange(e.target.value)}
        id="idMake"
        placeholder="Campo obligatorio"
      />
    </div>
  );