Geek Answers Handbook

Clear text input after click event

The problem I encountered is to enter text for the first time, then click "Add" and the input text box will be cleared. However, when I start typing again, the input text will not let me enter the text separately from the first letter. I'm not sure why he does it.

var FormTextBox = React.createClass({ handleOnBlur: function (e) { this.props.onBlur(e.target.value); }, render: function () { return ( <input value={this.props.value} key={this.props.fid} type="text" onBlur={this.handleOnBlur} /> ) } }); var TestFormTextBox = React.createClass({ getInitialState: function (e) { return { value: '' } }, handleOnAdd: function (e) { this.setState({ value: '' }); }, handleTextInfo: function (value) { this.setState({ value: value }); }, render: function () { return ( <div> <table> <tbody> <tr> <td>Details</td> <td></td> </tr> <tr> <td><FormTextBox value={this.state.value} fid={1} onBlur={this.handleTextInfo} /></td> <td><button onClick={this.handleOnAdd}>Add</button></td> </tr> </tbody> </table> </div> ) } });
+5
source share
3 answers

I am surprised that this works even the first time. With controlled components in response (those where you set the value, as you have with your input). you need to update the value whenever the user changes the text (with the onChange () event).

I made a JS fiddle here with your source code , and you can see that you cannot even update the value in the input. To update it, you need to replace the onBlur onChange event , like this JS script . Hope this helps!

+4
source

As mentioned here ( https://facebook.imtqy.com/react/docs/forms.html#controlled-components ),

The monitored value is prop. The visualization of the monitored will reflect the value of the cost of the support.

User input will not affect the item being rendered because React declared a value of Hello !. To update a value in response to user input, you can use the onChange event

You need to either change onBlur to onChange , or use defaultValue instead of value . eg

 <input defaultValue={this.props.value} key={this.props.fid} type="text" onBlur={this.handleOnBlur} />
+1
source

You need to change the value of the state variable as soon as you enter the entered value, because this is what you provide, if you do not change it, then the input does not display the updated value. For this you need to use the onChange event everywhere.

 var FormTextBox = React.createClass({ handleOnChange: function (e) { this.props.onChange(e.target.value); }, render: function () { return ( <input value={this.props.value} key={this.props.fid} type="text" onChange={this.handleOnChange} /> ) } }); var TestFormTextBox = React.createClass({ getInitialState: function (e) { return { value: '' } }, handleOnAdd: function (e) { this.setState({ value: '' }); }, handleTextInfo: function (value) { this.setState({ value: value }); }, render: function () { return ( <div> <table> <tbody> <tr> <td>Details</td> <td></td> </tr> <tr> <td><FormTextBox value={this.state.value} fid={1} onChange={this.handleTextInfo} /></td> <td><button onClick={this.handleOnAdd}>Add</button></td> </tr> </tbody> </table> </div> ) } }); ReactDOM.render(<TestFormTextBox />, document.getElementById('app')); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.min.js"></script> <div id="app"></div>
+1
source

More articles:


All Articles