[英]react-admin - How to set input values based on another
我正在嘗試創建一個郵政編碼輸入,使用 React-Admin 在創建表單中自動加載街道、州和城市值。 如何根據郵政編碼輸入的onBlur
事件填充輸入? 我取得的最好結果是以下場景:
我創建了一個具有 4 個輸入的自定義組件:郵政編碼(在我的國家稱為 CEP)、街道地址、州和城市。 然后我在 zip 輸入上添加了一個onBlur
事件,並根據狀態屬性在輸入上設置值。 這是代碼
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);
我在 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>
...
我知道我以錯誤的方式設置值,因為設置值時,所有創建表單都將被擦除。 我該怎么辦? 我不熟悉用 React 開發。 提前致謝
我想我找到了這樣做的正確方法。 我將自動填充地址功能移到 SimpleForm 元素上的onChange
事件,並將其從 CEP 輸入中刪除。 它現在就像一個魅力。 這是代碼:
自定義地址輸入
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>
);
}
}
);
和創建組件
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.