使用受控输入组件时的React useState挂钩问题

import React, { useState } from 'react';

function MyForm() {
  const [inputValue, setInputValue] = useState('');

  const handleInputChange = (event) => {
    setInputValue(event.target.value);
  }

  return (
    <input type="text" value={inputValue} onChange={handleInputChange} />
  );
}

export default MyForm;

import React, { useState } from 'react';

function MyForm() {
  const [textInputValue, setTextInputValue] = useState('');
  const [checkboxValue, setCheckboxValue] = useState(false);

  const handleTextInputChange = (event) => {
    setTextInputValue(event.target.value);
  }

  const handleCheckboxChange = (event) => {
    setCheckboxValue(event.target.checked);
  }

  return (
    <>
      <input type="text" value={textInputValue} onChange={handleTextInputChange} />
      <input type="checkbox" checked={checkboxValue} onChange={handleCheckboxChange} />
    </>
  );
}

export default MyForm;

import React, { useState } from 'react';

function MyForm() {
  const [inputValue, setInputValue] = useState('');
  const [validationError, setValidationError] = useState('');

  const handleInputChange = (event) => {
    const value = event.target.value;
    if (value.length <= 10) {
      setInputValue(value);
      setValidationError('');
    } else {
      setValidationError('输入长度不能超过10个字符');
    }
  }

  return (
    <>
      <input type="text" value={inputValue} onChange={handleInputChange} />
      {validationError && <span>{validationError}</span>}
    </>
  );
}

export default MyForm;

import React, { useState } from 'react';

function MyForm() {
  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');
  const [enableLastName, setEnableLastName] = useState(false);

  const handleFirstNameChange = (event) => {
    setFirstName(event.target.value);
    if (event.target.value === 'John') {
      setEnableLastName(true);
    } else {
      setEnableLastName(false);
    }
  }

  const handleLastNameChange = (event) => {
    setLastName(event.target.value);
  }

  return (
    <>
      <input type="text" value={firstName} onChange={handleFirstNameChange} />
      <input type="text" value={lastName} onChange={handleLastNameChange} disabled={!enableLastName} />
    </>
  );
}

export default MyForm;