Estoy creando un formulario de varios pasos donde un valor (o múltiplos) de un campo de formulario determina si se muestra un paso posterior.
Por ejemplo, los datos que estoy recibiendo se ven así:
{ cardConditional: lessThan: 75 show: true when: "fieldKeyHere" ... } Básicamente, esto me está diciendo, si el when es lessThan de 75, muestre el paso. también puede devolver greaterThan o eq , que he tenido en cuenta en el código a continuación. Mi pregunta es ¿cómo puedo tomar esa información y construir una función para devolver verdadero o falso dependiendo de eso? Supongo que estoy atascado en cómo unir ese condicional con la cadena de getMathSymbol .
Esto es lo que tengo hasta ahora:
const checkStepConditional = (step) => { const getMathSymbol = () => { if (step.cardConditional.eq) return "==="; else if (step.cardConditional.lessThan) return "<"; else if (step.cardConditional.greaterThan) return ">"; }; if (step.cardConditional) { const conditionalFieldKey = step.cardConditional.when; return form.values[conditionalFieldKey] <-- stuck here } else { return true; } };Puede crear un objeto con clave por las condiciones, cada una de las cuales implementa el método necesario para la comparación, y usar every() en las condiciones que existen en su objeto cardConditional para verificar la coincidencia de todas las condiciones.
const checkStepConditional = (form, step) => { const checkIf = { eq: (a, b) => a === b, lessThan: (a, b) => a < b, greaterThan: (a, b) => a > b, } if (step.cardConditional) { const cardCond = step.cardConditional; const field = form.values[cardCond.when]; const conditions = Object.keys(checkIf).filter(k => k in cardCond); return conditions.every(condition => checkIf[condition](field, cardCond[condition])) ? cardCond.show : !cardCond.show } }; const card = { cardConditional: { lessThan: 75, show: true, when: "fieldKeyHere", } }, form = { values: { "fieldKeyHere": 60 } }; console.log(checkStepConditional(form, card)); // 60 < 75 ? show: true const card1 = { cardConditional: { lessThan: 75, greaterThan: 60, show: true, when: "fieldKeyHere", } }, form1 = { values: { "fieldKeyHere": 65 } }; console.log(checkStepConditional(form1, card1)); // 65 < 75 && 65 > 60 ? show: true const card2 = { cardConditional: { lessThan: 75, greaterThan: 60, show: true, when: "fieldKeyHere", } }, form2 = { values: { "fieldKeyHere": 55 } }; console.log(checkStepConditional(form2, card2)); // 55 < 75 && 55 > 60 ? show: false