Question

我可以保存其他值以供说明，但是由于某些原因，当我选择女性时，男性收音机打开，反之亦然。

我应该在州内选择性别，而不是男性和女性吗？

import React, { useState } from 'react';

const Profile: React.FC = () => {

  const [state, setState] = useState({ male: false, female: false, other: true, name: 'John', country: 'AX' });
  const { male, female, name, country } = state;

  const onChange = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
    event.persist();
    const { id, value } = event.target;
    setState((prev) => ({...prev,[id]: value}));
  };

...

<label>Name</label>
<input type='text' id='name' value={name} onChange={onChange} />

<label>Country</label>
<select id='country' value={country} onChange={onChange}>
    <option value='AX'>Aaland Islands</option>
    <option value='AF'>Afghanistan</option>
</select>

<label>Gender</label>
<label className='form--radio-label'>
  <input type='radio' name='gender' id='male' checked={male} onChange={onChange}/>
  <span>Male</span>
</label>

<label className='form--radio-label'>
  <input type='radio' name='gender' id='female' checked={female} onChange={onChange}/>
  <span>Female</span>
</label>

<label className='form--radio-label'>
  <input type='radio' name='gender' id='other' checked={other} onChange={onChange}/>
  <span>Other</span>
</label>

}

Answer 1

我认为在这种情况下，最好在状态上使用gender，然后在渲染器中对其进行比较。同样，将需要修改onChange函数以允许为所有输入设置值，以及将name attr添加到输入：

const Profile = () => {
  const [state, setState] = useState({
    gender: '',
    name: 'John',
    country: 'AX',
  })
  const {gender, name, country} = state

  const onChange = event => {
    event.persist()
    const {id, name, value, type} = event.target

    if (type === 'radio') {
      setState(prev => ({...prev, gender: id}))
    } else {
      setState(prev => ({...prev, [name]: value}))
    }
  }

  return (
    <>
      <label>Name</label>
      <input
        type="text"
        id="name"
        name="name"
        value={name}
        onChange={onChange}
      />

      <label>Country</label>
      <select id="country" name="country" value={country} onChange={onChange}>
        <option value="AX">Aaland Islands</option>
        <option value="AF">Afghanistan</option>
      </select>

      <label>Gender</label>
      <label className="form--radio-label">
        <input
          type="radio"
          name="gender"
          id="male"
          checked={gender === 'male'}
          onChange={onChange}
        />
        <span>Male</span>
      </label>

      <label className="form--radio-label">
        <input
          type="radio"
          name="gender"
          id="female"
          checked={gender === 'female'}
          onChange={onChange}
        />
        <span>Female</span>
      </label>

      <label className="form--radio-label">
        <input
          type="radio"
          name="gender"
          id="other"
          checked={gender === 'other'}
          onChange={onChange}
        />
        <span>Other</span>
      </label>
    </>
  )
}

React TypeScript：单选按钮值onChange

1 个答案: