web-dev-qa-db-ja.com

react-admin-別の値に基づいて入力値を設定する方法

react-Adminを使用して、通り、州、都市の値を作成フォームに自動的に読み込む郵便番号入力を作成しようとしています。郵便番号入力のonBlurイベントに基づいて入力を入力するにはどうすればよいですか？私が達成した最良の結果は、次のシナリオです。

郵便番号（私の国ではCEPと呼ばれます）、住所、州、都市の4つの入力を持つカスタムコンポーネントを作成しました。次に、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 {...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の開発に慣れていません。前もって感謝します

reactjsreact-reduxreact-admin
6
Gabriel Marques

私はこれを行う適切な方法を見つけたと思います。自動入力アドレス関数を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>
...
7
Gabriel Marques