我堅持使用這一個函式，我有一個 onClick，當用戶單擊它時，它必須根據 If 陳述句執行兩件事，一個函式和一個狀態，但它似乎不起作用：
在我的代碼中，我希望該行在未禁用時執行“doScore”和“rolling : true”，但我不知道如何撰寫它使其有效
function RuleRow({ doScore, name, score, description, rolling }) {
const disabled = score !== undefined;
return (
<tr
className={`RuleRow RuleRow-${disabled ? "disabled" : "active"}`}
onClick={disabled ? null : doScore}
>
<td className="RuleRow-name">{name}</td>
<td className="RuleRow-score">{disabled ? score : description}</td>
</tr >
);
}
uj5u.com熱心網友回復：
這不是最干凈的解決方案，但您可以使用一個箭頭函式，如果禁用則為 null，或者使用一個呼叫兩個函式的函式體：
onClick={disabled ? null : (evt) => { doScore(evt); this.setState({ rolling: true }); }}
推薦的方法是創建一個呼叫這兩個函式的自定義函式，或者rolling: true如果可能的話，只在 doScore 函式中設定狀態。
uj5u.com熱心網友回復：
function RuleRow({ doScore, name, score, description, rolling }) {
const disabled = score !== undefined;
const handleClick = () => {
if (score !== undefined && rolling) {
// do something
} else {
doScore();
}
};
return (
<tr
className={`RuleRow RuleRow-${disabled ? "disabled" : "active"}`}
onClick={handleClick}
>
<td className="RuleRow-name">{name}</td>
<td className="RuleRow-score">{disabled ? score : description}</td>
</tr >
);
}
uj5u.com熱心網友回復：
- 請指定什么是
rollingprop（哪些值可以作為 傳遞rolling）以及它應該如何影響RuleRow組件。現在我看不到rolling內部組件的提及。 - 正如您從下面的代碼段中看到的那樣，如果不嚴格等于，您的函式
doScore將繼續運行。所以要么是 equal ，要么是無效函式，要么根本就不是函式。所以我想有一些東西。請提供您在此道具中傳遞的內容。onClickscoreundefinedscoreundefineddoScoredoScore - 如果你想更新組件的父
RuleRow組件的狀態。你應該像const [score, setScore] = useState('initial score'). 粘貼setScore到RuleRow作為道具。然后里面RuleRow寫onClick={disabled ? null : () => setScore('anything what you want')}。score內部父組件將被更新并RuleRow重新渲染。
function App() {
const score = undefined;
const disabled = score !== undefined;
console.log('value of disabled id ', disabled);
return (
<table className="App">
<tr onClick={disabled ? null : () => console.log("clicked")}>Hello, click me!</tr>
</table>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(
<App />,
rootElement
);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/370145.html
標籤：javascript 反应