There are many ways that you could do this. A naive implementation (ignoring flux and kin) would look like the following:
var React = require('react');
class Form extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {description: ''};
this.onChange = this.onChange.bind(this);
this.onSubmit = this.onSubmit.bind(this);
}
onChange(e) {
this.setState({[e.target.name]: e.target.value});
}
onSubmit(e) {
e.preventDefault();
fetch(this.props.formAction, {
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
description: this.state.description
})
});
this.setState({description: ''});
}
render() {
return (
<form action={this.props.action} method={this.props.method} onSubmit={this.onSubmit}>
<textarea onChange={this.onChange} name="description">
{this.state.description}
</textarea>
<button>Submit</button>
</form>
);
}
}
Form.propTypes = {
action: React.PropTypes.string.isRequired,
method: React.PropTypes.string,
}
Form.defaultProps = {
action: '/action/url',
method: 'post',
};
module.exports = Form;
Use React’s Component methods setState to manage your application data. When onSubmit is called, prevent the browser default behavior with your ajax’d version of the same.
If using Flux, that fetch call would be an Action instead.