Chrome中警告在没有onChange的情况下更新React中的“值”属性

如何解决Chrome中警告在没有onChange的情况下更新React中的“值”属性

我正在创建一个表格。有一个单选输入，可以选择下一个输入的值。该代码可以正常工作，但是我在Chrome控制台中收到警告。我尝试以几种不同的方式添加onChange（），但我得到的只是错误。如何解决此警告。

const [lyeConcentration,setLyeConcentration] = useState("33.33%");
const [lyeUnits,setLyeUnits] = useState("percentage");

  <div onChange={e => setLyeConcentration(e.target.value)}>
  <input type="radio" id="lyePercentage" name="lyeUnits" value="33.33%" defaultChecked />
  Percentage
  <input type="radio" id="lyeRatio" name="lyeUnits" value="2:1" />
  Ratio
</div>
<div>
  <label htmlFor="lyeConcentration">Lye Concentration</label>
  <input id="lyeConcentration" value={lyeConcentration} type="text" className="lyeConcentration" autoComplete="off" />
</div>

解决方法

尝试下面的代码，我在无线电输入和文本输入中添加了onChange。 我认为它实际上与文本输入有关。

  const [lyeConcentration,setLyeConcentration] = useState("33.33%");
  const [lyeUnits,setLyeUnits] = useState("percentage");

  return (
    <>
    <div>
     <input type="radio" id="lyePercentage" name="lyeUnits" value="33.33%" onChange={e => setLyeConcentration(e.target.value)} defaultChecked />
    Percentage
     <input type="radio" id="lyeRatio" name="lyeUnits"  onChange={e => setLyeConcentration(e.target.value)} value="2:1" />
    Ratio
  </div>
  <div>
    <label htmlFor="lyeConcentration">Lye Concentration</label>
    <input id="lyeConcentration" value={lyeConcentration} type="text" className="lyeConcentration" autoComplete="off"  onChange={e => setLyeConcentration(e.target.value)}/>
  </div>
  </>

）