如何在单个状态下存储多个输入字段和单选按钮

Question

const [isPublished, setIsPublished] = useState(false);
const handleRadio = (event: { currentTarget: { value: string } }) => {
const isPublished = event.currentTarget.value === 'true' ? true : false;
setValues({ isPublished });
};
const initialValues = {
code: '',
product: '',
checked: false,
jobCardNo: '',
datePicker1: '',
datePicker2: '',
serial: '',
technicalNo: '',
lineNo: '',
show: false,
};
const [values, setValues] = useState(initialValues);
const handleInput = (e: { target: { name: any; value: any } }) => {
const { name, value } = e.target;
setValues({
...values,
[name]: value,
});
};

在这里，我在一个状态中设置多个输入字段。我想更新在单个状态对象中选中的单选按钮。请让我如何在这些情况下做到这一点

<div className="radio">
<input
type="radio"
value="true"
checked={values.checked === true}
onChange={handleRadio}
/>
Yes
<input
type="radio"
value="false"
checked={values.checked === false}
onChange={handleRadio}
/>
No
</div>

Answer 1

const [values, setValues] = useState(initialValues);
const handleRadio = (event) => {
let value = event.target.value
let name = event.target.name
setValues({ ...input, [name]: value })
}

在handleRadio 的输入中添加名称

<input
type="radio"
value="true"
name="name here"
checked={values.checked === true}
onChange={handleRadio}
/>

Answer 2

以下是我所做的一些更改请点击链接：https://codesandbox.io/s/modern-rain-857z8b?file=/src/App.js

我刚刚添加了radio inputs的名称，并使用了一个handleInput处理程序。

下面是一个代码示例：

const initialValues = { 
code: "", product: "",
checked: "false",
jobCardNo: "",
datePicker1: "",
datePicker2: "",
serial: "",
technicalNo: "",
lineNo: "",
show: false
};
const [values, setValues] = useState(initialValues);
const handleInput = (e) => { 
const { name, value } = e.target;
setValues({ ...values, [name]: value }); 
};
return (
<div className="radio">
<input
type="radio"
value="true"
name="checked"
checked={values.checked === "true"}
onChange={handleInput} 
/>
Yes
<input
type="radio"
value="false"
name="checked"
checked={values.checked === "false"}
onChange={handleInput}
/>
No
</div>
)