React输入框无法输入内容，寻求技术解决方案

我碰到个头疼的问题，查了好多方案都没解决。我写了三个不同配置的输入框，但全都没法输入内容，代码如下：

import React, { useState } from 'react'

const ContactForm1 = () => {
  const [formStatus, setFormStatus] = useState('Submit')
  const [name, setName] = useState('')
  const [name1, setName1] = useState('')
  const [name2, setName2] = useState('')

  const handleSubmit = (e) => {
    e.preventDefault()
    setFormStatus('Submitting...')
    let conFom = {
      name, name1, name2
    }
    console.log(conFom)
  }

  const onNameChange = (event) => {
    setName(event.target.value)
  }
  const onName1Change = (event) => {
    setName1(event.target.value)
  }

  return (
    <div className="container mt-5">
      <form onSubmit={handleSubmit} method="POST">
          <div className="form-group">
            <label htmlFor="name">Name</label>
            <input id="name" name="name" type="text" className="form-control" value={name} 
                placeholder="Please enter your full name" onChange={onNameChange} />
          </div>
          <div className="form-group">
            <label htmlFor="name1">Name1</label>
            <input id="name1" name="name1" type="text" className="form-control" defaultValue={name1} 
                placeholder="Please enter your full name1" onChange={onName1Change} />
          </div>
          <div className="form-group">
            <label htmlFor="name2">Name2</label>
            <input id="name2" name="name2" type="text" className="form-control"
                placeholder="Please enter your full name2" />
          </div>
          <button type="submit" className="btn btn-primary">{formStatus}</button>
        </form>
    </div>
  )
}

export default ContactForm1

三个输入框的问题各有不同，逐个修正：

• Name输入框：逻辑本身是对的，但React单页应用里通常不需要表单的method="POST"属性，可尝试移除；若仍无法输入，检查是否有外部样式或JS阻止了输入事件。
• Name1输入框：错误混用了defaultValue和受控组件写法。defaultValue是非受控组件的初始值属性，既然已经定义了状态和事件处理，应把defaultValue={name1}改成value={name1}，确保输入时状态能同步更新。
• Name2输入框：既没绑定状态值，也没添加onChange事件处理，属于未受控且无法收集输入值的状态。需要给它绑定value={name2}，同时添加对应的change事件处理函数。

修复后的完整代码：

import React, { useState } from 'react'

const ContactForm1 = () => {
  const [formStatus, setFormStatus] = useState('Submit')
  const [name, setName] = useState('')
  const [name1, setName1] = useState('')
  const [name2, setName2] = useState('')

  const handleSubmit = (e) => {
    e.preventDefault()
    setFormStatus('Submitting...')
    const conFom = {
      name, name1, name2
    }
    console.log(conFom)
  }

  const onNameChange = (event) => {
    setName(event.target.value)
  }
  
  const onName1Change = (event) => {
    setName1(event.target.value)
  }
  
  const onName2Change = (event) => {
    setName2(event.target.value)
  }

  return (
    <div className="container mt-5">
      <form onSubmit={handleSubmit}>
          <div className="form-group">
            <label htmlFor="name">Name</label>
            <input 
              id="name" 
              name="name" 
              type="text" 
              className="form-control" 
              value={name} 
              placeholder="Please enter your full name" 
              onChange={onNameChange} 
            />
          </div>
          <div className="form-group">
            <label htmlFor="name1">Name1</label>
            <input 
              id="name1" 
              name="name1" 
              type="text" 
              className="form-control" 
              value={name1} 
              placeholder="Please enter your full name1" 
              onChange={onName1Change} 
            />
          </div>
          <div className="form-group">
            <label htmlFor="name2">Name2</label>
            <input 
              id="name2" 
              name="name2" 
              type="text" 
              className="form-control" 
              value={name2} 
              placeholder="Please enter your full name2" 
              onChange={onName2Change} 
            />
          </div>
          <button type="submit" className="btn btn-primary">{formStatus}</button>
        </form>
    </div>
  )
}

export default ContactForm1

内容的提问来源于stack exchange，提问作者Sandeep