如何在值更改时设置 redux 表单字段的可见性？

如何解决如何在值更改时设置 redux 表单字段的可见性？

每当用户设置的数字高于允许的数字时，我都会尝试为新的 redux 表单字段设置可见性。所以基本上我从休息调用中获取一些数据，将数据与用户输入到字段中的数据进行比较，如果数字高于预期，我想设置表单中新字段的可见性。

我的表格：

const TaskForm = (props) => {
        
    const {fields: {title,hours},handleSubmit,pristine,submitting,invalid} = props;
    const timesheetData = useSelector(state => state.timesheet)
    const [maxHoursExceeded,setMaxHoursExceeded] = useState(false);

    return (
        <form onSubmit={handleSubmit(submit.bind(this))}>
            <div className="field-wrap"> 
                <label className="label" htmlFor="title">Title:</label>
                <Field name="title" component={titleInput}/>
            </div>
            <div className="field-wrap">
                <label className="label" htmlFor="hours">Hours:</label>
                <Field name="hours" component={hoursInput}  />
            </div>
            <div className={maxHoursExceeded ? "field-wrap": "field-wrap visible"}> // this visibility should change
                <label className="label" htmlFor="maxHours">Change max hours:</label>
                <Field name="maxHours" component={hoursInput}  />
            </div>
            <div className="btn-wrap align-right">
                <Button  className="btn"type="submit" disabled={invalid} onClick={props.onClose} >Create</Button>
            </div>
        </form>  
    );
    }

表单验证：

function validate ( values,timesheetData,setMaxHoursExceeded ) {
    const {title,hours} =values
    const errors = {}
    if(!title || title.trim() === ''){
        errors.title = 'Title field is required'
    } 
    if(!hours || hours.trim() === ''){
        errors.hours = 'Hours field is required'
    } else if (isMaxExceeded) {
        errors.hours = 'Maximum hours has been exceeded'
        setMaxHoursExceeded(true) // <<<< the error >>>>
    }
    return errors
}


function isMaxExceeded (timesheetData,values) {
 //this function just checks the validity of the inputed data

    if(values.hours + timesheetData.timesheet.tasks.reduce((total,{ hours }) => total + hours,0) > timesheetData.timesheet.maxHours){
        return true
    } else return false 
}

我不断收到的错误是“setMaxHoursExceeded 不是函数”，因为我想我没有正确传递状态函数。 这甚至是处理这个问题的正确方法吗？因为我觉得它变得很乱。

解决方法

您可以获取输入时间的值并使用 useEffect 触发 hours_selected 并检查您的条件

import { formValueSelector } from 'redux-form'
const TaskForm = (props) => {
   useEffect(()=>{
      if(your condition){
         setMaxHoursExceeded(true)
      }
   },[props.hours_selected])
}
const mapStateToProps = (state,props) => {
    const selector = formValueSelector(props.form) 
    return {
        hours_selected: selector(state,'hours')
    }
}