Estoy atascado con esta función, tengo un onClick que cuando un usuario hace clic en él, tiene que realizar dos cosas en función de la declaración If, una función y un estado, pero no parece funcionar:
en mi código, quiero la fila cuando no está deshabilitada para hacer "doScore" y "rolling: true", pero no sé cómo escribirlo para que funcione
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 > ); }rolling (qué valores se pueden pasar como rolling ) y cómo debería impactar en el componente RuleRow . Por ahora no veo ninguna mención del componente interior rolling .doScore se ejecutará en onClick si la score no es estrictamente igual a undefined . Entonces, o score es igual a undefined , o doScore es una función no válida o no funciona en absoluto. Así que supongo que hay algo con doScore . Proporcione por favor lo que pasa en este apoyo.RuleRow . Debe escribir algo como const [score, setScore] = useState('initial score') . Pegue setScore en RuleRow como accesorio. Y luego, dentro RuleRow escribe onClick={disabled ? null : () => setScore('anything what you want')} . la score dentro del componente principal se actualizará y RuleRow se volverá a representar. 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>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 > ); }Esta no es la solución más limpia, pero podría usar una función de flecha que tiene un valor nulo si está deshabilitada o un cuerpo de función que llame a dos funciones:
onClick={disabled ? null : (evt) => { doScore(evt); this.setState({ rolling: true }); }} La forma recomendada de hacerlo sería crear una función personalizada que llame a ambas funciones o simplemente establecer el estado rolling: true en la función doScore si es posible.