带有单选按钮React/TS的触发器功能

Question

我有这样的单选按钮：

<div className="row">
<div className="col-md-4">
<label className="radio">
<input onChange={() => {serviceCalc()}} type="radio" name="radio-btn-product" value="standard" id="standard" checked />
<i></i>Standard
</label>
</div>
<div className="col-md-4">
<label className="radio">
<input onChange={() => {serviceCalc()}} type="radio" name="radio-btn-product" value="premium" id="premium" />
<i></i>Premium
</label>
</div>
<div className="col-md-4">
<label className="radio">
<input onChange={() => {serviceCalc()}} type="radio" name="radio-btn-product" value="excelium" id="excelium" />
<i></i>Excelium
</label>
</div>
</div>

我正试图让serviceCalc函数触发其他三个函数，这取决于点击哪个单选按钮，如下所示：

const serviceCalc = () => {
const standard1 = (document.getElementById("standard") as HTMLInputElement);
const premium1 = (document.getElementById("premium") as HTMLInputElement);
const excelium1 = (document.getElementById("excelium") as HTMLInputElement);
if (standard1.checked){            
standard();
}
else if (premium1.checked) {
premium();
}
else if (excelium1.checked) {
excelium();
}
}

但当我选择标准选项时，例如，这不会触发：

const standard = () => {
console.log('stand_test')
}

任何帮助都将不胜感激。

Answer 1

问题是您的单选按钮由控制(它们上有一个onChange，其中一个上有checked(，但您只能在标准上设置checked。由于标准始终处于选中状态，因此单击标准不会更改任何内容，因此不会引发更改事件。

另外，onChange={() => {serviceCalc()}}应该几乎总是onChange={serviceCalc}。

通常，当使用受控输入时，会将状态存储在组件状态中。这里有一个例子：

const { useState } = React;
const Example = () => {
const [serviceLevel, setServiceLevel] = useState("standard");
const serviceCalc = ({currentTarget: {value}}/*: {currentTarget: HTMLInputElement}*/) => {
setServiceLevel(value);
// If you need to run other functions here, you can do that
// with an `if`/`else`/etc. on `value`, which is
// `"standard"`, `"premium"`, or `"excelium"
};

// This is purely to show the new service level
console.log(`service level is ${serviceLevel}`);
return (
<div className="row">
<div className="col-md-4">
<label className="radio">
<input onChange={serviceCalc} type="radio" name="radio-btn-product" value="standard" checked={serviceLevel === "standard"} />
<i></i>Standard
</label>
</div>
<div className="col-md-4">
<label className="radio">
<input onChange={serviceCalc} type="radio" name="radio-btn-product" value="premium" checked={serviceLevel === "premium"} />
<i></i>Premium
</label>
</div>
<div className="col-md-4">
<label className="radio">
<input onChange={serviceCalc} type="radio" name="radio-btn-product" value="excelium" checked={serviceLevel === "excelium"} />
<i></i>Excelium
</label>
</div>
</div>
);
};
ReactDOM.render(<Example />, document.getElementById("root"));

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>

Answer 2

根据检查的按钮传递参数：

const serviceCalc = (service: "standard" | "premium" | "excelium") => {
if (service === "standard") {
return standard();
}

if (service === "premium") {
return premium();
}

if (service === "excelium") {
return excelium();
}
}

你会这样使用它：

<div className="col-md-4">
<label className="radio">
<input onChange={() => {serviceCalc("excelium")}} type="radio" name="radio-btn-product" value="excelium" id="excelium" />
<i></i>Excelium
</label>
</div>