JsonForms 根据 api 调用更新其他渲染器

Question

我们将 JsonForms 与 React 和 MUI 结合使用。有一个特定的渲染器（CEP 渲染器相当于邮政编码），onBlur 执行 API 调用，并且它应该更新同一表单中其他字段的值。这些其他字段是不同的渲染器。

这是 CEP 渲染器的简化实现：

export const cepRender = {
  tester: cepRenderTester,
  renderer: withJsonFormsControlProps((props) => {
    const handleChange = async (event: FocusEvent<HTMLInputElement>) => {
      const cep = event?.target?.value;
      props.handleChange(props?.path, cep);

      if (cep?.replace?.(/\D/g, '')?.length === 8) {
        const response = await client.get(`https://viacep.com.br/ws/${cep}/json/`);
        const { logradouro, bairro, localidade, uf } = response.data;
        props.handleChange('endereco.logradouro', logradouro || '');
        props.handleChange('endereco.bairro', bairro || '');
        props.handleChange('endereco.municipio', localidade || '');
        props.handleChange('endereco.estado', uf || '');
      }
  };

  return (
    <div className='custom-input-container' ref={fieldRef}>
      <TextField
        {...props}
        variant='filled'
        className="input"
        required={props.required}
        defaultValue={props?.data ?? ''}
        inputRef={
          props?.uischema?.options?.mask ? withMask(props.uischema.options.mask) : undefined
        }
        onBlur={handleChange}
        InputProps={{ disableUnderline: true } as Partial<OutlinedInputProps>}
      />
    </div>
  );
}),
}

问题是其他字段没有设置。在重构它以使用 MUI 之前，handleChange 确实有效。但出于样式原因并遵循相同的模式，我们开始使用 MUI。

其他渲染器的渲染部分与我已经提供的简化实现非常相似。如果有必要我也可以包括它。

Answer 1

经过长时间的调试，终于成功了。我必须编辑其他使用

defaultValue

属性的渲染器，并改用

value

属性。

props.handleChange()

更改了值，但 MUI 的文本字段从未检查过它。