如何优化渲染无线电和绑定变化的值与React和JSX?

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()}
);

有没有其他更简单的方法?我喜欢

• 在返回语句内内联渲染，而不是使用单独的箭头函数来渲染无线电*使用多个if-else梯子(有办法内联它吗?)
• onClick绑定将值设置为状态是否正确?我试着onChange但是不工作
• 这对我来说很好，但我正在寻找一个性能优化版本的代码。
• 在这里，我设置defaultChecked基于if-else情况，什么是最好的方式来内联这个和收缩代码?

Answer 1

看起来您真正需要做的就是根据状态使defaultCheckedprop的值为真或假。

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>

(有办法内联吗?)

如果你不能使用上面的方法，可以，例如:

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