Custom the input field only instead of whole body of insert modal

[andrewssun1]

Hi Allen,

Really appreciate the work you've done here. For the Add Item Modal body, is it possible to customize one particular form field? In my case, I want to change the type of the form field from type="text" to type="password", and I can't reference the HTML element since there's no ID. Thanks in advance!

[AllenFang]

@sunnyownage, if you want to have more ability to custom the field, I suggest you to use v3.0.0-beta, current stable version is v3.0.0-beta.10. And you can check this example, this example is for customizing the modal body. This is for customizing whole modal

Please let me know if you got any trouble on implement

[andrewssun1]

I did not realize you had refs to all these elements. I solved this by adding the following line to componentDidMount (after searching the ref through console and inspect tool):

this.refs.managetable.refs.toolbar.refs.form[1].type = "password";

[AllenFang]

My references is for v3.0.0, after v3.0.0 we can custom the content of insert model for everywhere, so if you feel bad or hard to use for the default styling or fields or something, you can give it a try :)

[andrewssun1]

Hi Allen,

Upon upgrading to v3.0.0, I can no longer use my original method
this.refs.managetable.refs.toolbar.refs.form[1].type = "password";

It seems that you have removed this ref. Is there an alternative way to customize the type of a particular form field without changing anything else? I like the style of the default insert modal and don't wish to customize it any other way.

Thanks!!

[AllenFang]

hi @sunnyownage, for customization, you are supposed to be used custom API to custom the content of insert model, use ref is much dangerous and a hacky way. Fro newest version, you can custom the header, body, footer of insert modal or event a whole modal, but unfortunately, you can't custom only one input field currently, but I'll spend some time to do this feature, thanks. And let me know if you have any questions.

[AllenFang]

HI @sunnyownage, now we can support the custom only for input field, check this example to learn how to custom it, let me know if you have any questions, thanks 👍

Remember to upgrade to v3.2.0