Question

我有一个自定义字段，该字段采用JSON并动态打印出TextField对象。对于每个TextField，我都有一个onChange和onBlur事件。 onChange用于更新状态，而onBlur用于更新将要传递到API并保存的最终值。我正在使用useInput钩子来保存更新的值，但是，当我使用onBlur时，它不保存值。如果我仅使用onChange，那么它确实会保存值，但只会保存第一个按键，因此才切换到onBlur。有任何想法吗？这是代码：

const DefaultField = props => {
    const {
        input,
    } = useInput(props.record);

    let parsedObj = JSON.parse(props.record.values);

    const [defaultState, setDefaultState] = React.useState({
        websiteLink: parsedObj.websiteLink,
        menuInstructionsLink: parsedObj.menuInstructionsLink,
        surveyLink: parsedObj.surveyLink
    });

    const handleBlur = (event) => {
        parsedObj[event.target.name] = event.target.value;
        props.record.values= JSON.stringify(values);
        //event.target.value is the expected value but it's not persisted when I save it.
    };

    const handleChange = (event) => {
        setDefaultState({ ...defaultState, [event.target.name]: event.target.value });
    };

    return (
        <FormControl component="fieldset">
            <FormGroup {...input} id="defaultGroup" aria-label="position">
                <React.Fragment>
                    { Object.keys(parsedObj).map((key) => (
                        <TextField
                            id="standard-full-width"
                            name={key}
                            label={key}
                            onBlur={handleBlur}
                            onChange={handleChange}
                            style={{ margin: 8, width: '500px' }}
                            value={defaultState[key]}
                            fullWidth
                            margin="normal"
                        />
                    ))}
                </React.Fragment>
            </FormGroup>
        </FormControl>
    )
}

Answer 1

我从来没有正确解决它，但是我确实发现dataProvider被调用了两次。第一次它将发送期望值，但是第二次将这些值设置回原始值，但是我注意到“ previousData”字段具有我需要的值。现在，我只是确保使用“ previousData”字段。这不是最漂亮的解决方案，但目前它正在起作用。也许是错误或危险的事情正在发生。

事件onBlur是否可与React Admin useInput挂钩一起用于自定义字段？

1 个答案: