react-admin - 如何根据另一个设置输入值 [英] react-admin - How to set input values based on another

查看：46
本文介绍了react-admin - 如何根据另一个设置输入值的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试创建一个邮政编码输入，该输入使用 React-Admin 在创建表单中自动加载街道、州和城市值.如何根据邮政编码输入的 onBlur 事件填充输入?我取得的最好结果是以下场景:

我创建了一个自定义组件，它有 4 个输入:邮政编码(在我的国家称为 CEP)、街道地址、州和城市.然后我在 zip 输入上添加了一个 onBlur 事件，并根据状态属性在输入上设置值.这是代码

class CustomAddressInput extends React.Component {构造函数(道具){超级(道具)；this.state = {cep : '',地址 : ''，uf : '',城市 : ''，}this.setAddress = this.setAddress.bind(this);}设置地址(e){if(e.target.value != undefined){endereco(e.target.value).then((result)=>{this.setState({cep:result.cep，地址:result.logradouro，uf: 结果.uf,城市:result.localidade});});}}使成为() {const { 类} = this.props;返回 (<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" choice={stateList} defaultValue={this.state.uf}/><TextInput label="Cidade" source="city" defaultValue={this.state.city}/>);}}导出默认 withStyles(styles)(CustomAddressInput);

我在 Create 上使用它

<代码>...<创建{...道具}><简单表格><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"/><自定义地址输入/><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}/></简单表格></创建>...

我知道我以错误的方式设置值，因为设置值时，所有创建表单都将被擦除.我应该怎么办?我不熟悉用 React 开发.提前致谢

解决方案

我想我找到了正确的方法.我将自动填充地址功能移动到 SimpleForm 元素上的 onChange 事件，并将其从 CEP 输入中删除.它现在就像一个魅力.代码如下:

自定义地址输入

导出默认 withStyles(styles)(class CustomAddressInput 扩展 React.Component {使成为() {返回 (<div><div><TextInput label="CEP" source="cep" parse={parseCep} format={parseCep} validate={validateCEP}/>

<div><TextInput label="Endereco" source="address"/><SelectInput label="Estado" source="state" selection={stateList}/><TextInput label="Cidade" source="city"/>

);}});

和创建组件

const autoFillAddress = (event)=>{如果(事件.cep){if(event.cep.length === 9){endereco(event.cep).then((result)=>{event.address = result.logradouro;event.state = result.uf;event.city = result.localidade;});}}}...<创建{...道具}><SimpleForm onChange={autoFillAddress}><div><TextInput label="Nome" source="name" validate={validateName}/><TextInput label="CPF/CNPJ" source="cpfcnpj" parse={parseCpfCnpj} format={parseCpfCnpj} validate={validateCpfCnpj}/>

<div className={classes.packTres, classes.fullInput}><TextInput label="Email" source="email"validate={validateEmail}/><TextInput label="Senha" source="password" type="password" validate={validatePassword}/>

<TextInput label="Telefone" source="phone" type="tel" parse={parsePhone} format={parsePhone} validate={validatePhone}/><自定义地址输入/><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}/></简单表格></创建>...

i'm trying to create a ZIP code input that loads street, state and city values automatically in a Create form using React-Admin. How can I populate the inputs based on the onBlur event of the zip code input? 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. Then I added an onBlur event on the zip input and set the value on the inputs based on state attributes. 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 {...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. 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. 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>
...

这篇关于react-admin - 如何根据另一个设置输入值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆