反应无线电不重置值答案

【问题标题】：React radio not resetting the values反应无线电不重置值
【发布时间】：2023-04-04 06:27:01
【问题描述】：

我是 reactjs 的新手。我有表示 UserA、UserB、UserC 和 User D 的单选按钮。基于单选按钮的子选择（如管理员、编辑器、用户），我对 UserA 拥有多个权限。同样，对于 UserD，我只能拥有一项权限，例如 SuperAdmin。每当我选择 UserD 时，它都应该将权限设置为正在工作的“超级管理员”。但如果我选择另一个单选按钮，用户 D 不会取消选择。

我相信这是因为我在两个输入字段（用户 D 和用户 A 管理子选项）上都使用名称作为“权限”，这没有重置状态中的值。

这里是codepen 供您参考。任何帮助将不胜感激。

谢谢

【问题讨论】：

逻辑为什么这么复杂？实际要求是什么？我可以看到权限有两个值“admin”和“superAdmin”。您使用的逻辑确实令人困惑。如果能对实际的逻辑加一些更详细的解释就更好了。
对不起，如果我的描述让您感到困惑。如果您看到 codepen 链接，我有多个单选按钮。如果我先选择用户 D，然后选择任何其他单选按钮，则默认情况下用户 D 选项应取消选择，这在我的情况下不会发生。

标签： reactjs react-hooks

【解决方案1】：

您必须使所有输入[单选按钮]的结构相似。您必须根据条件更新状态。该代码根据给定的要求为我工作。我对input userD 和setState 方法做了一些小的改动。我希望这能解决您的问题。

export default function Form() {
  const [state, setState] = React.useState({
    user: '',
    testRequest: false,
    permission: ''
  });

  const [disableuserA, setdisableuserA] = React.useState(false);
  const [value, setValue] = React.useState(0);
  const [selected, setSelected] = React.useState('');

  function handleChange(e) {
    const value =
      e.target.type === 'checkbox' ? e.target.checked : e.target.value;

    setState({
      ...state,
      [e.target.name]: value,
      ...(e.target.name == 'user' &&
        e.target.value == 'userD' && { permission: 'superAdmin' })
    });
    setSelected(e.target.value);
  }
    
  
  return (
    <div className="app">
      <form onSubmit={handleFormSubmit}>
        <div>
          <div>
            <input
              type="checkbox"
              name="testRequest"
              value={value}
              onClick={() => setdisableuserA(!disableuserA)}
              checked={state.testRequest}
              onChange={handleChange}
            />
            Enable this to hide the User A option
          </div>
          <div className="heading">user</div> <br />
          <input
            disabled={disableuserA}
            type="radio"
            name="user"
            value="userA"
            checked={selected === 'userA' || selected === 'admin'}
            onChange={handleChange}
          />
          UserA
          <input
            type="radio"
            name="user"
            value="userB"
            checked={state.user === 'userB'}
            onChange={handleChange}
          />
          UserB
          <input
            type="radio"
            name="user"
            value="userC"
            checked={state.user === 'userC'}
            onChange={handleChange}
          />
          UserC
          <input
            type="radio"
            name="user"
            value="userD"
            checked={state.user === 'userD'}
            onChange={handleChange}
          />
          UserD
          <br /> <hr />
          <div
            aria-hidden={
              selected !== 'userA' &&
              selected !== 'admin' &&
              selected !== 'editor' &&
              selected !== 'publisher'
                ? true
                : false
            }
          >
            <input
              type="radio"
              name="permission"
              value="admin"
              checked={state.permission === 'admin'}
              onChange={handleChange}
            />{' '}
            Admin
            <input
              type="radio"
              name="permission"
              value="editor"
              checked={state.permission === 'editor'}
              onChange={handleChange}
            />{' '}
            Editor
            <input
              type="radio"
              name="permission"
              value="publisher"
              checked={state.permission === 'publisher'}
              onChange={handleChange}
            />{' '}
            Publisher
          </div>
          <br /> <br />
          <button type="submit" className="btn-default btn">
            Submit{' '}
          </button>
        </div>
      </form>
      <pre>{JSON.stringify(state, null, 3)}</pre>
    </div>
  );
}

Live Demo

【讨论】：