对于功能部件：

const SignIn = () => {

  const [formData, setFormData] = useState({
    email: "",
    password: ""
  });

  
  const handleChange = (event) => {
    const { value, name } = event.target;
    setFormData({...formData, [name]: value });
  };


  const handleSubmit = (e) => {
    e.preventDefault();
    console.log("Signed in");
    setFormData({
      email: "",
      password: ""
    });
  };


  return (
    <div className="sign-in-container">
      <form onSubmit={handleSubmit}>
        <FormInput
          name="email"
          type="email"
          value={formData.email}
          handleChange={handleChange}
          label="email"
          required
        />
        <FormInput
          name="password"
          type="password"
          value={formData.password}
          handleChange={handleChange}
          label="password"
          required
        />
        <CustomButton type="submit">Sign in</CustomButton>
      </form>
    </div>
  );
};

export default SignIn;

在组件内部，按以下方式放置输入框。

<input className="class-name"
              type= "text"
              id="id-123"
              value={ this.state.value || "" }
              name="field-name"
              placeholder="Enter Name"
              />

可以应用多种方法：

基于类的方法：使用本地状态并使用默认值定义现有字段：

constructor(props) {
    super(props);
    this.state = {
      value:''
    }
  }
<input type='text'
                  name='firstName'
                  value={this.state.value}
                  className="col-12"
                  onChange={this.onChange}
                  placeholder='Enter First name' />

在功能型组件中使用Hooks React>16.8：

[value, setValue] = useState('');
<input type='text'
                  name='firstName'
                  value={value}
                  className="col-12"
                  onChange={this.onChange}
                  placeholder='Enter First name' />

如果使用propTypes并在HOC组件为函数样式的情况下为propTypes提供默认值。

 HOC.propTypes = {
    value       : PropTypes.string
  }
  HOC.efaultProps = {
    value: ''
  }

function HOC (){

  return (<input type='text'
                  name='firstName'
                  value={this.props.value}
                  className="col-12"
                  onChange={this.onChange}
                  placeholder='Enter First name' />)

}

原因是，在您定义的状态中：

this.state = { fields: {} }

字段作为空白对象，因此在第一次渲染过程中，this.state.fields.name将未定义，输入字段的值将为：

value={undefined}

因此，输入字段将变得不受控制。

在输入中输入任何值后，状态中的字段将更改为：

this.state = { fields: {name: 'xyz'} }

此时，输入场被转换为受控分量；这就是为什么会出现错误：

组件正在将文本类型的非受控输入更改为受约束的。

可能的解决方案：

1-将状态中的字段定义为：

this.state = { fields: {name: ''} }

2-或使用短路评估定义值属性，如下所示：

value={this.state.fields.name || ''}   // (undefined || '') = ''

即使将undefined设置为上一次渲染时的值（甚至在正确初始化之前），也会出现问题。

问题在于更换

value={value}

with

value={(value==undefined?null:value)}

const [name, setName] = useState()

在文本字段中键入后立即生成错误

const [name, setName] = useState('') // <-- by putting in quotes 

将修复此字符串示例上的问题。