I have a textarea in my React app who is filled with a value. I want this textarea to be updated and the form submited to update the row in the database.
<textarea id="description" className="materialize-textarea" length="120" value={description} disabled={isDisabled}></textarea>
The description variable fill the textarea with the value from the database. The field is not disabled.
I tried to attach an onChange event who dispatch an action (redux) to change the value of the textarea, but it trigger for each letter and it's too slow.
How can i create a textarea who is filled by a value and is editable?
Thank you!
I have a textarea in my React app who is filled with a value. I want this textarea to be updated and the form submited to update the row in the database.
<textarea id="description" className="materialize-textarea" length="120" value={description} disabled={isDisabled}></textarea>
The description variable fill the textarea with the value from the database. The field is not disabled.
I tried to attach an onChange event who dispatch an action (redux) to change the value of the textarea, but it trigger for each letter and it's too slow.
How can i create a textarea who is filled by a value and is editable?
Thank you!
Share Improve this question asked Oct 19, 2015 at 18:25 Crak_mboutinCrak_mboutin 1,0863 gold badges12 silver badges18 bronze badges 2- Do you want the POST to your server to happen when a button is clicked? When enter is pressed? When the field is no longer in focus? – elithrar Commented Oct 20, 2015 at 2:59
- I post when the form is submited – Crak_mboutin Commented Oct 20, 2015 at 13:34
2 Answers
Reset to default 3Here is a ponent with two textareas. There is a controlled relation between props and state. That is the key for inputs. Note ponentWillReceiveProps.
import React, {Component} from 'react';
import Actions from '../../flux/Actions';
let CurrentSnipDivSty = {
height: 'calc(((100% - 40px) * .4) - 3px)',
minHeight: '9.5em',
width: '100%'
};
let CurrentSnipTextAreaSty = {
backgroundColor: '#213919',
border: '1px solid #314929',
color: '#afac87',
fontSize: '1em',
height: 'calc(50% - 20px)',
overflowY: 'auto',
padding: '5px',
width: 'calc(100% - 12px)'
};
class SnipsDetailRender extends Component {
render() {
let snip = this.state.snip.snip;
let ment = this.state.snip.ment;
return (
<div id='CurrentSnipDivSty' style={CurrentSnipDivSty}>
<textarea
value={snip}
onChange={this.handleSnipChange}
style={CurrentSnipTextAreaSty} />
<textarea
value={ment}
onChange={this.handleCommentChange}
style={CurrentSnipTextAreaSty} />
</div>
);
}
}
export default class SnipsDetail extends SnipsDetailRender {
constructor() {
super();
this.state = { snip: {snip: '', ment: ''} };
}
ponentWillReceiveProps = (nextProps) => {
if ((nextProps.data.snip != this.state.snip.snip) || (nextProps.data.ment != this.state.snip.ment))
this.setState({snip: nextProps.data});
}
handleSnipChange = (ev) => {
let newSnip = {snip: ev.target.value, ment: this.state.snip.ment};
this.setState({snip: newSnip});
Actions.saveSnipEdit(newSnip);
}
handleCommentChange = (ev) => {
let newSnip = {snip: this.state.snip.snip, ment: ev.target.value};
this.setState({snip: newSnip});
Actions.saveSnipEdit(newSnip);
}
}
If you're finding using the onChange event too slow, you can simply read from the DOM in the submit handler using refs. An example is shown here:
https://facebook.github.io/react/docs/tutorial.html#adding-new-ments
Since you're using redux, you can probably export a lot of that functionality to an action creator.