如何使用 React 和 JSX 优化渲染 Radios 并绑定变化的值？

Question

我有这样的状态

const [inputMode, setInputMode] = useState(1);

这就是我正在做的渲染和绑定状态的值。

const renderRadios = () => 
{
    if (inputMode == 1) 
    {
        return (
            <>
               <input defaultChecked type="radio" value="1" onClick={e => setInputMode(parseInt(e.target.value))} />                   
               <input type="radio" value="2" onClick={e => setInputMode(parseInt(e.target.value))} />
            </>
        );
    }
    else if (inputMode == 2) 
    {
        return (
            <>
               <input type="radio" value="1" onClick={e => setInputMode(parseInt(e.target.value))} />                   
               <input defaultChecked type="radio" value="2" onClick={e => setInputMode(parseInt(e.target.value))} />
            </>
        );
    }
}

return(
    <h1>Result</h2>
    {renderRadios()}
);

有没有更简单的替代方法？我更喜欢

在 return 语句中进行内联渲染，而不是使用单独的箭头函数来渲染收音机 *使用多个 if-else 梯形图（有什么内联方法吗？）
onClick 绑定是否正确设置状态值？我试过 onChange 但不知何故不起作用
这对我来说很好，但我正在寻找代码的性能优化版本。
在这里，我根据 if-else 情况设置 defaultChecked，内联它并缩小代码的最佳方法是什么？

Answer 1

看起来您真正需要做的就是根据状态将 defaultChecked 属性的值设置为真值或假值。

onChange 工作得很好，因为你已经知道输入的值是 1 或 2，你可以直接使用它们而不是通过 parseInt(event.target.value).

function App() {
  return (
    <>
      <h1>Result</h1>
      <input defaultChecked={inputMode === 1} className="form-check-input" type="radio" name="inputMode" value="1" id="tapanddone" onChange={e => setInputMode(1)} />
      <input defaultChecked={inputMode === 2} className="form-check-input" type="radio" name="inputMode" value="2" id="logvalue" onChange={e => setInputMode(2)} />
    </>
  );
}

现场演示：

function App() {
  const [inputMode, setInputMode] = React.useState(1);
  console.log('inputMode', inputMode);
  return (
    <React.Fragment>
      <h1>Result</h1>
      <input defaultChecked={inputMode === 1} className="form-check-input" type="radio" name="inputMode" value="1" id="tapanddone" onChange={e => setInputMode(Number(e.target.value))} />
      <input defaultChecked={inputMode === 2} className="form-check-input" type="radio" name="inputMode" value="2" id="logvalue" onChange={e => setInputMode(Number(e.target.value))} />
    </React.Fragment>
  );
}
ReactDOM.render(<App />, document.querySelector('.react'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>

(Any way to inline it?)

如果您不能使用上述方法，可以，例如：

return (
  <h1>Result</h2>
  {
    inputMode === 1
    ? (
      <>
        <input> ...
      </>
    ) : (
      <>
        <input> ...
      </>
    )
  }
);

如何使用 React 和 JSX 优化渲染 Radios 并绑定变化的值？

How to optimally render Radios and bind changing values with React and JSX?

html

javascript

radio

jsx

reactjs