Estoy desarrollando una tabla para obtener la entrada del usuario. Por lo tanto, estoy usando textFields o autocompletar para obtener los valores y, según el valor, cambie el color del borde y el texto auxiliar. Mesa
Cada celda tiene su onChange:
onChange={(e)=>{ setState(prevState=>({ ...prevState, runTimeStamp:{ ...prevState.runTimeStamp, helperText:state.runTimeStamp.evaluateHelperText(e.target.value), focused:true, error:state.runTimeStamp.evaluateHelperText(e.target.value)? true: false, color:state.runTimeStamp.evaluateColor(e.target.value, state.runTimeStamp.evaluateHelperText(e.target.value)? true: false) } })) }}En este ejemplo, la columna es runTimeStamp. Me gustaría que se convierta en una función para tener dentro de onChange solo la devolución de llamada, así:
onChange={InputChange}¿Hay alguna manera de pasar el nombre de la columna como una cadena y convertirse en el genérico setState?
Ex:
const InputChange =(e)=>{ let name = e.target.name setState(prevState=>({ ...prevState, runTimeStamp:{ ...prevState.name, helperText:state.name.evaluateHelperText(e.target.value), focused:true, error:state.name.evaluateHelperText(e.target.value)? true: false, color:state.name.evaluateColor(e.target.value, state.name.evaluateHelperText(e.target.value)? true: false) } })) }}El estado es el siguiente:
const [state,setState] =useState({ testName:{ defaultValue:file_name, }, runTimeStamp:{ helperText: '', error: '', color:'', focused: false, evaluateHelperText:(text)=>{ if (text === undefined || text === "") { return "Required" } else if (text.length < 3) { return "Name should contains at least 3 chars" } return false }, evaluateColor:(text,error)=>{ if(text==''){ return "warning" } else { return error? 'error':'success' } }, },