[英]onClick executing a function and setState in react
I am stuck with this one function, I have an onClick that when a user clicks on it, it has to perform two things based on the If statement, one function and one state, but it doesnt seem to work: I am stuck with this one function, I have an onClick that when a user clicks on it, it has to perform two things based on the If statement, one function and one state, but it doesnt seem to work:
in my code i want the row when it is Not disabled to do “doScore” as well as “rolling: true” but I don't know how to write it that it works在我的代码中,当它未被禁用时,我希望该行执行“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 >
);
}
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 >
);
}
This isn't the cleanest solution but you could use an arrow function that has null if disabled or else a function body that calls two functions:这不是最干净的解决方案,但您可以使用箭头 function 如果禁用则具有 null 或调用两个函数的 function 主体:
onClick={disabled ? null : (evt) => { doScore(evt); this.setState({ rolling: true }); }}
Recommended way to go would be to create a custom function that calls both functions or just set state rolling: true
in the doScore function if possible. Recommended way to go would be to create a custom function that calls both functions or just set state
rolling: true
in the doScore function if possible.
rolling
prop (which values can be passed as rolling
) and how it should impact on RuleRow
component.rolling
prop(哪些值可以作为rolling
传递)以及它应该如何影响RuleRow
组件。 For now I see no mention of rolling
inside component.rolling
。doScore
will run on onClick
if score
not strictly equal to undefined
.score
不严格等于undefined
,您的 function doScore
将在onClick
上运行。 So either score
is equal undefined
, or doScore
is invalid function or is not function at all.score
等于undefined
,要么doScore
无效 function 或者根本不是 function 。 So I suppose there are something with doScore
.doScore
有一些东西。 Provide please what you pass in this prop.RuleRow
component.RuleRow
。 You should write smth like const [score, setScore] = useState('initial score')
.const [score, setScore] = useState('initial score')
这样写。 Paste setScore
to RuleRow
as prop.RuleRow
作为道具粘贴到setScore
。 And then inside RuleRow
write onClick={disabled? null: () => setScore('anything what you want')}
RuleRow
里面写onClick={disabled? null: () => setScore('anything what you want')}
onClick={disabled? null: () => setScore('anything what you want')}
. onClick={disabled? null: () => setScore('anything what you want')}
。 score
inside parent component will be updated and RuleRow
will be rerendered.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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.