React Input Element : Value vs Default Value
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>
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> ); }}
I was tinkering with this and found a really simple solution:
class App extends Component {constructor(props) { super(props) this.enterText = this.enterText.bind(this) this.state = { userNameText: 'user name', pswdText: 'pswd', textEntry: false }}async enterText() { if (!this.state.textEntry) { await this.clearText() this.setState({textEntry: true}) }}clearText() { this.setState({ userNameText: '', pswdText: '' })}render() { return ( <div className="App"> <div className="App-header"> <h1 className="App-title"> Welcome </h1> </div> <div className="login-fields"> <LoginFields userNameText={this.state.userNameText} pswdText={this.state.pswdText} onFocus={this.enterText} /> </div> </div> )}}So, upon initial render(), the state of the fields are whatever is hard coded in the constructor. When the user clicks in either the name or pswd box (these could easily be separated), both are cleared with clearText() and then both are set to null with allowText(). Once set to null, the user input text is accepted.
Make sure the LoginFields component has this in the input:
onFocus={this.props.onFocus}