javascript - Enable redux-form and set focus to field - Stack Overflow

admin管理员组

文章数量:1332881

I've got disabled form field by default and when user clicks on button Edit, it will enable the field. I also want to set focus on the field, but I don't know how. I've created ref to the field and tried some focus() function on it, but it hasn't worked. You can try it here on sandbox.

I've got disabled form field by default and when user clicks on button Edit, it will enable the field. I also want to set focus on the field, but I don't know how. I've created ref to the field and tried some focus() function on it, but it hasn't worked. You can try it here on sandbox.

• javascript
• reactjs
• redux-form

Share Improve this question Follow asked Jul 10, 2018 at 14:05 ketysekketysek 1,21922 gold badges1919 silver badges4848 bronze badges 1

• Two reasons 1) you're using a custom TextField stateless ponent: ponent={TextField}. You cannot assign a ref to a stateless ponent. Convert TextField to a class ponent. 2) You need to add the withRef prop to your reduxForm Field ponent – Chase DeAnda Commented Jul 10, 2018 at 14:14

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

1. You must assign the ref to the input element instead of the Field ponent
2. Add an callback to set in your parent ponent the reference of subponent input
3. Use the reference to focus the input when pressing the edit button:

https://codesandbox.io/s/rlx390xn6m

just HTML's autofocus is much better: https://davidwalsh.name/autofocus

• in react use with camelcase: autoFocus

本文标签： javascriptEnable reduxform and set focus to fieldStack Overflow