React Input Element : Value vs Default Value

Question

i am new in React and REDUX, i just develop a simple react app, and now i face a problem, when i render an input element within my component if i set the element "value" it become read-only but if i set the value on "defaultValue" it will never update again when i re-update my state.

Here is my code :

    import React from "react";     export default class EditForm extends React.Component {      editTransaction(event) {          var transaction = this.props.transaction;          event.preventDefault();         var NewTransaction = {             transactions_data: {                 amount: this.refs.amount.value             }         }          this.props.editTransaction(NewTransaction, transaction.id);     }      closeForm() {         this.props.closeForm();     }      render() {         var {amount}=this.props.transaction;         return (             <div>                 <br/>                 <h4>Edit Transaction</h4>                 <div className="btn btn-danger pull-right" onClick={this.closeForm.bind(this)}>close</div>                 <div className="clearfix"></div>                 <form onSubmit={this.editTransaction.bind(this)}>                     <div>                         <label for="amount">Amount</label>                         <input value={amount} onChange={(value) => this.onChange(value)} className="form-control"                                id="amount" name="amount" type="number"                                ref="amount"/>                     </div>                     <br/>                     <br/>                     <input className="btn btn-info" type="submit" value="submit"/>                 </form>             </div>         );     } } 

and then i found out if i make an error out of this by adding onChange={(value) => this.onChange(value)} on my input element, it works properly ( it updating while the props or state is updating, and i can re-type the value), but i think this is not a proper solution, because it cause errors on my browser console. It is because "this.onChange" function does not exist.

please kindly help me to solve this problem, and thanks in advance

Regards,

Vidy

Answer 1

The reason your input doesn't work is because you need to define the onChange function which actually sets the state with the updated value. You can probably do it inline since it only needs on statement like

<input type="text" value={this.state.inputVal} onChange={(e) => {this.setState({inputVal: e.target.value})}} /> 

However I would recommend you to use an onChange method as you can handle multiple inputs together with it and it looks cleaner

class EditForm extends React.Component {        constructor() {          super();          this.state = {                    }      }      onChange(e) {           this.setState({[e.target.name]: e.target.value})      }      editTransaction(event) {            var transaction = this.props.transaction;            event.preventDefault();          var NewTransaction = {              transactions_data: {                  amount: this.refs.amount.value              }          }            this.props.editTransaction(NewTransaction, transaction.id);      }        closeForm() {          this.props.closeForm();      }        render() {                   return (              <div>                  <br/>                  <h4>Edit Transaction</h4>                  <div className="btn btn-danger pull-right" onClick={this.closeForm.bind(this)}>close</div>                  <div className="clearfix"></div>                  <form onSubmit={this.editTransaction.bind(this)}>                      <div>                          <label for="amount">Amount</label>                          <input value={this.state.amount} onChange={(value) => this.onChange(value)} className="form-control"                                 id="amount" name="amount" type="number"                                 ref="amount"/>                           <input value={this.state.amount1} onChange={(value) => this.onChange(value)} className="form-control"                                 id="amount1" name="amount1" type="number"                                 ref="amount"/>                      </div>                      <br/>                      <br/>                      <input className="btn btn-info" type="submit" value="submit"/>                  </form>              </div>          );      }  }    ReactDOM.render(<EditForm/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react-dom.min.js"></script>  <div id="app"></div>

Answer 2

You need to define an onChange method, if you are using redux that could be an action that updates your component state via a reducer. An easier method using simple state with es6 is shown below. Furthermore, you are getting the value from the input field via ref which is discouraged by Facebook. This should also give you an error because you are trying to control and uncontrolled component.

Here's a link to the form documentation for further reading.

class Foo extends React.Component {    constructor(props) {     super(props);     this.state = ({       inputVal: '',     });   }   onChange = (e) => {     this.setState({ [e.target.name]: e.target.value });   }   handleSubmit = (event) => {     event.preventDefault();     console.log(this.state.inputVal);   }   render() {     return (       <div>         <input type="text" value={this.state.inputVal} onChange={this.onChange} />       </div>     );   } }