React中父子组件及输入框的变量值修改问题求助

我正在创建父组件、子组件和输入组件，需将父组件的变量传递给子组件与输入组件，允许在子组件中修改变量并在父组件中获取修改后的值。但当前代码运行时，在输入框输入内容文本不更新，父组件的setValue函数也未被调用。我已定义setValue函数用于处理各类变量变更，但不清楚如何正确实现，恳请各位提供帮助，谢谢。

原代码如下：

const { useState } = React;

function CreateAccount() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');

  const setValue = (newValue, valueType) => {
    if (valueType === 'email') setEmail(newValue);
    else if (valueType === 'password') setPassword(newValue);
    else setConfirmPassword(newValue);
  };

  return (
    <div>
      <Form
        email={email}
        password={password}
        confirmPassword={confirmPassword}
        viewType='createClientAccount'
        onChangeState={setValue}
      />
      <hr/>
      <div>Email is:{email}</div>
    </div>
  );
}

function Form({ email, password, confirmPassword, viewType, onChangeState }) {
  if (viewType === 'createClientAccount') {
    return (
      <div className='box-shadow'>
        <h2>Create Client Account</h2>

        <TextInputField
          label={'Email'}
          value={email}
          onChangeState={onChangeState}
        />
      </div>
    );
  }
}

function TextInputField({ label, value, onChangeState }) {
  function onChange() {
    onChangeState(value);
  }

  return (
    <div className='inputFieldWrapper'>
      <p>{label}</p>
      <input name='email' value={value} onChange={onChange} />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<CreateAccount />);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>

你的代码存在两个核心问题：

• TextInputField组件的onChange函数没有获取输入框的最新输入值，反而把旧的value传给了onChangeState
• 调用onChangeState时没有传递valueType参数，父组件的setValue无法判断要更新哪个状态变量

针对上述问题，做以下三处修改：

1. 给TextInputField添加valueType属性，明确当前输入框对应父组件的哪个状态
2. 在TextInputField的onChange函数中，通过事件对象获取输入框的最新值
3. 调用onChangeState时，同时传入新值和valueType

const { useState } = React;

function CreateAccount() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');

  const setValue = (newValue, valueType) => {
    if (valueType === 'email') setEmail(newValue);
    else if (valueType === 'password') setPassword(newValue);
    else setConfirmPassword(newValue);
  };

  return (
    <div>
      <Form
        email={email}
        password={password}
        confirmPassword={confirmPassword}
        viewType='createClientAccount'
        onChangeState={setValue}
      />
      <hr/>
      <div>Email is:{email}</div>
    </div>
  );
}

function Form({ email, password, confirmPassword, viewType, onChangeState }) {
  if (viewType === 'createClientAccount') {
    return (
      <div className='box-shadow'>
        <h2>Create Client Account</h2>
        {/* 新增valueType属性，指定当前输入对应email状态 */}
        <TextInputField
          label={'Email'}
          value={email}
          valueType='email'
          onChangeState={onChangeState}
        />
      </div>
    );
  }
}

function TextInputField({ label, value, valueType, onChangeState }) {
  // 接收event参数，获取输入框最新值
  function onChange(event) {
    const newValue = event.target.value;
    // 同时传入新值和valueType
    onChangeState(newValue, valueType);
  }

  return (
    <div className='inputFieldWrapper'>
      <p>{label}</p>
      <input name='email' value={value} onChange={onChange} />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<CreateAccount />);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>

如果后续要添加密码、确认密码输入框，直接复用TextInputField即可，只需要传递对应的value和valueType：

<TextInputField
  label={'Password'}
  value={password}
  valueType='password'
  onChangeState={onChangeState}
  type='password'
/>
<TextInputField
  label={'Confirm Password'}
  value={confirmPassword}
  valueType='confirmPassword'
  onChangeState={onChangeState}
  type='password'
/>

同时给TextInputField添加type属性的默认值，让组件更通用：

function TextInputField({ label, value, valueType, onChangeState, type='text' }) {
  // ...
  return (
    <div className='inputFieldWrapper'>
      <p>{label}</p>
      <input name={valueType} value={value} onChange={onChange} type={type} />
    </div>
  );
}

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