Can t type in React input text field

Question

I m trying my first bit of React js and am stumped early on    I have the code below  which renders a search form into  lt div id  search  gt  lt  div gt   But typing in the search box does nothing   Presumably something is going missing passing the props and state up and down  and this seems like a common problem  But I m stumped - I can t see what s missing   var SearchFacet   React createClass     handleChange  function         this props onUserInput        this refs searchStringInput value              render  function         return          lt div gt          Search for           lt input           type  text            value  this props searchString            ref  searchStringInput            onchange  this handleChange    gt         lt  div gt                  var SearchTool   React createClass     render  function         return          lt form gt           lt SearchFacet            searchString  this props searchString            onUserInput  this props onUserInput             gt           lt button gt Search lt  button gt         lt  form gt                  var Searcher   React createClass     getInitialState  function         return         searchString                   handleUserInput  function searchString        this setState         searchString  searchString                render  function         return          lt div gt           lt SearchTool            searchString  this state searchString            onUserInput  this handleUserInput            gt         lt  div gt                  ReactDOM render     lt Searcher   gt     document getElementById  searcher         Eventually I will have other types of SearchFacet  but I m just trying to get this one working

User · Answer

i m also facing that problem now solved Give the onChange to the searchTool  then that problem will solve for you

User · Answer

Once I ran into a similar error  Let me describe it  Edit js       components returns edit form         function EditVideo  id                        onChange event listener      const handleChange    e    gt           setTextData                 textData              e target name   e target value trim                                                ImportEdit js    import Edit from    Edit           function ImportEdit                             return            lt div gt               lt EditVideo id  id   gt           lt  div gt                      export default ImportEdit   The Problem was   I was unable to use spacebar  i e  if i press spacekey  i didn t see space input  The Bug   trim    trim   method was trimming all the white space i typed Note  Edit js worked fine when used sepeartely without import

User · Answer

You haven t properly cased your onchange prop in the input  It needs to be onChange in JSX    lt input   type  text    value  this props searchString    ref  searchStringInput    onchange  this handleChange   lt -- should be onChange    gt      The topic of passing a value prop to an  lt input gt   and then somehow changing the value passed in response to user interaction using an onChange handler is pretty well-considered in the docs    They refer to such inputs as Controlled Components  and refer to inputs that instead let the DOM natively handle the input s value and subsequent changes from the user as Uncontrolled Components   Whenever you set the value prop of an input to some variable  you have a Controlled Component  This means you must change the value of the variable by some programmatic means or else the input will always hold that value and will never change  even when you type -- the native behaviour of the input  to update its value on typing  is overridden by React here    So  you re correctly taking that variable from state  and have a handler to update the state all set up fine  The problem was because you have onchange and not the correct onChange the handler was never being called and so the value was never being updated when you type into the input  When you do use onChange the handler is called  the value is updated when you type  and you see your changes

User · Answer

In a class component context    If the changeHandler method is a normal function  handleChange e       this setState   e target name   e target value        it can be used such as this   onChange   e   gt this handleChange e    lt input type  quot text quot  name  quot any quot  value  this state any  onChange   e   gt this handleChange e   gt  lt  input gt   If the changeHandler method is an arrow function  handle    e    gt           this setState   e target name   e target value            it can be used like this    onChange  this handle     lt input type  quot text quot  name  quot any2 quot  value  this state any2  onChange  this handle   gt  lt  input gt   And this solved my  quot Can t type in React input text field quot  problem

User · Answer

I also have same problem and in my case I injected reducer properly but still I couldn t type in field  It turns out if you are using immutable you have to use redux-form immutable   import  reducer as formReducer  from  redux-form immutable   const reducer   combineReducers       form  formReducer   import  Field  reduxForm  from  redux-form immutable      your component      Notice that your state should be like state- gt form otherwise you have to explicitly config the library also the name for state should be form  see this issue

User · Answer

Using value  whatever  will make it so you cannot type in the input field  You should use defaultValue  Hello     See https   facebook github io react docs uncontrolled-components html default-values  Also  the onchange should be onChange as  davnicwil points out

User · Answer

defaultValue instead of value worked for me

User · Answer

For me the following simple change worked perfectly   lt input type  text           value  props letter           onChange  event   gt  setTxtLetter event target value     gt      does not work          change    value  myPropVal  to    defaultValue  myPropVal     lt input type  text           defaultValue  props letter           onChange  event   gt  setTxtLetter event target value     gt      Works

User · Answer

This might be caused by the onChange function is not updating the proper value which is mentioned in the input   Example    lt input type  text  value  this state textValue  onChange    this changeText  gt  lt  input gt    changeText event           this setState               textValue   event target value                     in the onChange function update the mentioned value field

[javascript] Can't type in React input text field

Examples related to javascript

Examples related to reactjs