javascript - 当我设置初始值时，React Input 不会改变

Question

我正在使用 ReactJS 创建 CRUD，但 React Forms 有问题。

在某些情况下，我需要在我的输入中设置一个初始值，为此我使用了一个逻辑运算符，一切正常，但是当我更改输入的值时，输入的值并没有改变.

我的组件:

export function Modal(props) {

  const [inputsValues, setInputsValues] = useState({
    id: '',
    nameInput: '',
    emailInput: '',
    phoneInput: ''
  })

  const handleInputChange = (event) => {
    console.log(event.target.value)
    inputsValues[event.target.name] = event.target.value
    setInputsValues()
  }
  const handleFormSubmit = (event) => {
    event.preventDefault()
    console.log(inputsValues)
  }

  return (
    <div className={`area-modal ${props.isOpen ? 'open' : null}`}>
      <div className="modal">
        <h1>{props.title}</h1>
        <form onSubmit={handleFormSubmit} action="">
          <label htmlFor="">Name</label>
          <div className="area-input">
            <input
              type="text"
              name="nameInput"
              value={inputsValues.nameInput}
              onChange={handleInputChange}
            />
          </div>
          <label htmlFor="">Phone</label>
          <div className="area-input">
            <input
              type="text"
              name="phoneInput"
              value={props.dataForm ? props.dataForm.phone : ''}
              onChange={handleInputChange}
            />
          </div>
          <label htmlFor="">Email</label>
          <div className="area-input">
            <input
              type="email"
              name="emailInput"
              value={props.dataForm ? props.dataForm.email : ''}
              onChange={handleInputChange}
            />
          </div>
          <button>{props.buttonText}</button>
        </form>
      </div>
    </div>
  )
}

Answer 1

代替

inputsValues[event.target.name] = event.target.value;
setInputsValues();

您需要使用 setInputsValues 将状态更新为新值:

const { name, value} = e.target;
setInputsValues({ ...inputsValues, [name]: value });