react-admin - 如何根据另一个设置输入值

Posted 2023-02-18

【中文标题】react-admin - 如何根据另一个设置输入值

【英文标题】：react-admin - How to set input values based on another

【发布时间】：2018-12-26 12:36:52

【问题描述】：

我正在尝试创建一个邮政编码输入，该输入使用 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 进行开发。 提前致谢

【参考方案1】：

我想我找到了正确的方法。我将自动填充地址功能移至 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>
...