Ant-design: FormItem tidak mendeteksi input kontrol di dalam

Dibuat pada 28 Mar 2017  ·  8Komentar  ·  Sumber: ant-design/ant-design

Lingkungan Hidup

  • versi antd: 2.7.4
  • OS dan versinya: OS X 10.12.3
  • Browser dan versinya: Chrome 56

Apa yang kamu lakukan? Berikan langkah-langkah untuk memunculkan kembali masalah Anda.

Kami membungkus bidang formulir kami ke dalam komponennya sendiri yang berisi logika validasinya. Contoh

UsernameInput.js

class UsernameInput extends Component {
  render() {
    return this.props.form.getFieldDecorator(this.props.id, {
      rules: [...]
    })(InputComponent);
  }
}

Dan kami ingin menggunakannya dalam bentuk kami seperti ini

// imports here

class CustomForm {
  render() {
    return (<Form>
      <Form.Item>
        <UsernameInput form={this.props.form} />
      </Form.Item>
    </Form>);
  }
}

export default Form.create()(CustomForm);

Ini tidak berfungsi karena FormItem.getControls tidak mendeteksi komponen sebagai kontrol. Hanya melihat pembungkusnya sebagai UsernameInput.

Apa yang kamu harapkan

FormItem untuk mendeteksi UsernameInput dan berfungsi sebagai kontrol masukan apa pun. Tampilkan pesan kesalahan, umpan balik, bantuan, dll.

Apa yang terjadi?

FormItem tidak menemukan kontrol di dalamnya.

Inactive IssueHuntFest help wanted 🗣 Discussion
Sumber
picture gaastonsr

Komentar yang paling membantu

Kami menyelesaikan ini dengan memanggil komponen sebagai fungsi

CustomForm.js

// imports here

class CustomForm {
  render() {
    return (<Form>
      <Form.Item>
        {UsernameInput({ form: this.props.form })}
      </Form.Item>
    </Form>);
  }
}

export default Form.create()(CustomForm);

Tetapi jika Anda terbuka untuk ide, saya pikir solusi yang mungkin adalah mendefinisikan konteks dalam FormItem dan Input dapat mendaftarkan diri mereka sendiri ketika ada. Contoh

FormItem.js

class FormItem extends Component {
  static childContextTypes = {
    registerControl: PropTypes.func
  };

  getChildContext() {
    return { registerControl: this.registerControl }; 
  }

  registerControl(control) {
    this.controls.push(control);
  }
}

Input.js

class Input extends Component {
  static contextTypes = {
    registerControl: PropTypes.func
  };

  componentDidMount() {
    if (this.context.registerControl) {
      this.registerControl(this);
    }
  }
}
picture gaastonsr pada 30 Mar 2017
👍4

Semua 8 komentar

Sulit untuk menyelesaikan masalah ini. Bisakah Anda memposting saran Anda (bagaimana menerapkan) di sini jika ada?

benjycui picture benjycui pada 29 Mar 2017

Kami menyelesaikan ini dengan memanggil komponen sebagai fungsi

CustomForm.js

// imports here

class CustomForm {
  render() {
    return (<Form>
      <Form.Item>
        {UsernameInput({ form: this.props.form })}
      </Form.Item>
    </Form>);
  }
}

export default Form.create()(CustomForm);

Tetapi jika Anda terbuka untuk ide, saya pikir solusi yang mungkin adalah mendefinisikan konteks dalam FormItem dan Input dapat mendaftarkan diri mereka sendiri ketika ada. Contoh

FormItem.js

class FormItem extends Component {
  static childContextTypes = {
    registerControl: PropTypes.func
  };

  getChildContext() {
    return { registerControl: this.registerControl }; 
  }

  registerControl(control) {
    this.controls.push(control);
  }
}

Input.js

class Input extends Component {
  static contextTypes = {
    registerControl: PropTypes.func
  };

  componentDidMount() {
    if (this.context.registerControl) {
      this.registerControl(this);
    }
  }
}
gaastonsr picture gaastonsr pada 30 Mar 2017
👍4

Saya akan mencoba mencari solusi.

benjycui picture benjycui pada 30 Mar 2017

@gaastonsr dapatkah Anda menunjukkan seluruh kode Anda tentang UsernameInput dengan solusi ini?

sbyps picture sbyps pada 24 Nov 2017

@gaastonsr Solusi Anda sangat membantu saya!

Apakah ini masalah yang masih valid? Saran konteks terdengar bagus bagi saya.

tomasfrancisco picture tomasfrancisco pada 2 Agu 2018
👍1

Baru saja bertemu hari ini di [email protected]. Masih menjadi masalah. Solusi fungsi

JonDum picture JonDum pada 14 Okt 2018

Halo @gaastonsr. Kami sangat menyukai proposal / umpan balik Anda, selamat datang untuk mengirimkan Permintaan Tarik untuk itu. Silakan kirim Permintaan Tarik Anda ke cabang yang tepat (cabang fitur untuk fitur baru, master untuk perbaikan bug dan perubahan lainnya), isi [Template Permintaan Tarik ] di sini, sediakan changelog / TypeScript / dokumentasi / test case jika diperlukan dan pastikan CI lolos, kami akan segera memeriksanya, kami hargai sebelumnya dan kami mencari kata kunci untuk kontribusi Anda!

Halo @gaastonsr, kami sepenuhnya setuju dengan saran / umpan balik Anda, silakan di gudang ini untuk membuat Permintaan Tarik untuk menyelesaikan masalah ini. Silakan kirim Permintaan Tarik ke cabang yang benar (fitur baru ke cabang fitur, yang lainnya ke cabang master), pastikan untuk mengisi templat prasetel di Permintaan Tarik, dan berikan log perubahan yang sesuai, definisi TypeScript, kasus uji, dokumen, dll. Yang diperlukan untuk perubahan , Dan pastikan CI lolos, kami akan meninjau secepatnya, terima kasih sebelumnya dan nantikan kontribusi Anda!

giphy

ant-design-bot picture ant-design-bot pada 28 Agu 2019

Silakan periksa komponen formulir baru di antd v4, formulir v3 tidak akan dipertahankan dalam waktu singkat.

afc163 picture afc163 pada 13 Mar 2020
Apakah halaman ini membantu?
0 / 5 - 0 peringkat

Masalah terkait

ericdai picture ericdai  ·  3Komentar
zhangchen2397 picture zhangchen2397  ·  3Komentar
kevyu picture kevyu  ·  3Komentar
shivekkhurana picture shivekkhurana  ·  3Komentar
taikongfeizhu picture taikongfeizhu  ·  3Komentar