react-admin - How to set input values based on another
I think i found the proper way of doing this. I moved the auto fill address function to a onChange
event on the SimpleForm element and removed it from the CEP input. It works like a charm now. Here is the code:
Custom Address input
export default withStyles(styles)( class CustomAddressInput extends React.Component { render() { return ( <div> <div> <TextInput label="CEP" source="cep" parse={parseCep} format={parseCep} validate={validateCEP}/> </div> <div> <TextInput label="Endereco" source="address"/> <SelectInput label="Estado" source="state" choices={stateList}/> <TextInput label="Cidade" source="city"/> </div> </div> ); } });
And the Create Component
const autoFillAddress = (event)=>{ if(event.cep){ if(event.cep.length === 9){ endereco(event.cep).then((result)=>{ event.address = result.logradouro; event.state = result.uf; event.city = result.localidade; }); } }}...<Create {...props}> <SimpleForm onChange={autoFillAddress}> <div> <TextInput label="Nome" source="name" validate={validateName}/> <TextInput label="CPF/CNPJ" source="cpfcnpj" parse={parseCpfCnpj} format={parseCpfCnpj} validate={validateCpfCnpj}/> </div> <div className={classes.packTres, classes.fullInput}> <TextInput label="Email" source="email"validate={validateEmail}/> <TextInput label="Senha" source="password" type="password" validate={validatePassword}/> </div> <TextInput label="Telefone" source="phone" type="tel" parse={parsePhone} format={parsePhone} validate={validatePhone}/> <CustomAddressInput /> <BooleanInput label="Pode criar outros usuários do sistema" source="canCreateUser" defaultValue={false}/> <BooleanInput label="Pode gerenciar projetos" source="canCreateProjects" defaultValue={false}/> <BooleanInput label="Pode visualizar honorários" source="canSeeFees" defaultValue={false}/> </SimpleForm></Create>...