[英]react-admin - How to set input values based on another
i'm trying to create a ZIP code input that loads street, state and city values automatically in a Create form using React-Admin.我正在尝试创建一个邮政编码输入,使用 React-Admin 在创建表单中自动加载街道、州和城市值。 How can I populate the inputs based on the
onBlur
event of the zip code input?如何根据邮政编码输入的
onBlur
事件填充输入? The best result i achieved is the following scenario:我取得的最好结果是以下场景:
I created a custom component that has 4 Inputs: zip code (in my country is called CEP), street address, state and city.我创建了一个具有 4 个输入的自定义组件:邮政编码(在我的国家称为 CEP)、街道地址、州和城市。 Then I added an
onBlur
event on the zip input and set the value on the inputs based on state attributes.然后我在 zip 输入上添加了一个
onBlur
事件,并根据状态属性在输入上设置值。 Here is the code这是代码
class CustomAddressInput extends React.Component {
constructor(props){
super(props);
this.state = {
cep : '',
address : '',
uf : '',
city : '',
}
this.setAddress = this.setAddress.bind(this);
}
setAddress(e){
if(e.target.value != undefined){
endereco(e.target.value).then((result)=>{
this.setState({
cep: result.cep,
address: result.logradouro,
uf: result.uf,
city: result.localidade
});
});
}
}
render() {
const { classes } = this.props;
return (
<TextInput label="CEP" source="cep" onBlur={(e) => this.setAddress(e)} defaultValue={this.state.cep} />
<TextInput label="Endereco" source="address" defaultValue={this.state.address}/>
<SelectInput label="Estado" source="state" choices={stateList} defaultValue={this.state.uf}/>
<TextInput label="Cidade" source="city" defaultValue={this.state.city}/>
);
}
}
export default withStyles(styles)(CustomAddressInput);
And i'm using it on a Create我在 Create 上使用它
...
<Create {...props}>
<SimpleForm>
<TextInput label="Nome" source="name"/>
<TextInput label="CPF/CNPJ" source="cpfcnpj"/>
<TextInput label="Email" source="email"/>
<TextInput label="Senha" source="password" type="password" />
<TextInput label="Telefone" source="phone" type="tel"/>
<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>
...
I know i'm setting the values in a wrong way because when the values are set, all the create form is wiped.我知道我以错误的方式设置值,因为设置值时,所有创建表单都将被擦除。 What should i do?
我该怎么办? I'm not familiar developing with React.
我不熟悉用 React 开发。 Thanks in advance
提前致谢
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.我将自动填充地址功能移到 SimpleForm 元素上的
onChange
事件,并将其从 CEP 输入中删除。 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>
...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.