使用单选按钮 React 设置状态以有条件地呈现答案

【问题标题】：Set state with radio buttons, React, to render conditionally使用单选按钮 React 设置状态以有条件地呈现
【发布时间】：2021-04-20 14:36:26
【问题描述】：

我正在尝试设置一个状态来进行一些条件渲染，但我无法让它工作。这个想法很简单，使用单选按钮更改输入，您会看到不同的元素。

import { useState } from "react";

function Form() {
  const [state, setState] = useState();

  function setValue(changeEvent) {
    setState({ state: changeEvent.target.value });
  }

  return (
    <>
      <div>
        <input type="radio" value={true} name="option" onChange={setValue} />
        <span>Oui</span>
        <input type="radio" value={false} name="option" onChange={setValue} /> <span>Non</span>
      </div>

      {state ? <div>You said yes! </div> : <div>You said no! </div>}
    </>
  );
}

export default Form;

当我记录状态时，值是正确的，但渲染只在开始时改变一次。

【问题讨论】：

标签： reactjs

【解决方案1】：

这是另一种方法。

import { useState } from "react";

function Form() {
  const [answer, setAnswer] = useState(false);
  const toggleAnswer = () => setAnswer(!answer);


  return (
    <>
      <div>
        <input type="radio" value={true} name="option" onClick={toggleAnswer} />
        <span>Oui</span>
        <input type="radio" value={false} name="option" onClick={toggleAnswer} /> <span>Non</span>
      </div>
      {answer ? <div>You said yes! </div> : <div>You said no! </div>}

    </>
  );
}

export default Form;

【讨论】：

【解决方案2】：

试试这个：

  function setValue(changeEvent) {
    setState(changeEvent.target.value);
  }

使用 useState 钩子，您不需要传递整个组件状态对象，只需传递单个状态值

【讨论】：

不走运，我很确定状态正在改变，问题在于渲染。
@ShmiliBreuer 我试过了，但没有我得到 2 个错误：警告：收到布尔属性 checked 的字符串 false。浏览器会将其解释为真实值。你的意思是checked={false}？警告：组件正在更改要控制的非受控输入。这可能是由于值从未定义更改为已定义值引起的，这不应该发生。在组件的生命周期内决定使用受控输入元素还是不受控输入元素。第二个我在尝试解决此问题时多次看到，但我不明白它的含义..
尝试设置默认值：const [state, setState] = useState(false);
我不确定，但也许 value 应该是一个字符串，而不是布尔值，比如 value="true" 然后 checked={state === "true"}
不...状态是正确的，但不知何故渲染不正确..感谢您的尝试！

【解决方案3】：

问题很简单，当您使用setState 时，您传递的对象具有名为state 的属性，该属性具有值（真或假）。

所以当你请求state 时，它总是true，因为你有一个不是假的对象。

为了查看您存储的内容，请将其添加到您的 div 之前...

{JSON.stringify(state, null, 2)}

你会看到

{"state": false}

或

{"state": true}

取决于您的选择...所以答案由奥斯卡给出。但为了清楚起见，您正在做state = {"state": false}，所以也许可以在react documentation阅读更多内容

【讨论】：