I can’t find any solution how to implement inline editing in Meteor with ReactJS.
Inline editing as in? It would help to see examples
In content that display on the page
see this the following links
It is working with blaze not reactjs
you will need to find an editable react component
You can use this package
Use react-meteor-data’s createContainer to load the values from the db, pass the values to the state with a lifecycle method such as componentWillReceiveProps then RIEK provides callbacks change and afterFinish
Call your meteor method to update the db in one of these.
Instead of meteor package, you can use and npm package.
There are some cool packages for react.
You can check https://draftjs.org/ it is purely for react.
There is also this package https://github.com/wangzuo/react-medium-editor it is a react wrapper for https://github.com/yabwe/medium-editor
Here’s my take for a click-to-edit React component wrapping RIEK.
It expects to receive a document, the name of the field to edit (can accept nested fields using dot notation), and the Meteor Method to call to update the document, as well as the input type and whether a value is required. This example only shows textfield and textarea types.
import React from 'react';
import PropTypes from 'prop-types';
import { Meteor } from 'meteor/meteor';
import { RIEInput, RIETextArea } from 'riek'
import _ from 'lodash';
export default class EditInline extends React.Component {
constructor (props) {
super(props);
this.state = {};
this.state[props.field] = _.get(props.doc, props.field);
this.isStringAcceptable = this.isStringAcceptable.bind(this);
this.updateDoc = this.updateDoc.bind(this);
}
isStringAcceptable(string) {
return (!this.props.requied || string.length >= 1);
}
updateDoc(newState) {
const { updateMethod, doc, field } = this.props;
_.set(doc, field, newState[field].trim());
Meteor.call(updateMethod, doc, (error, result) => {
if (error) {
alert(error.reason);
}
});
}
render() {
const { doc, field, inputType, required } = this.props;
const rieProps = {
value: _.get(doc, field),
change: this.updateDoc,
propName: field,
className: this.state.highlight ? "riek editable" : "riek",
classLoading: "loading",
classInvalid: "invalid",
validate: this.isStringAcceptable;
}
if (inputType=='textfield') return <RIEInput {...rieProps} />;
if (inputType=='textarea') return <RIETextArea {...rieProps} />;
}
}
EditInline.propTypes = {
doc: PropTypes.object.isRequired,
field: PropTypes.string.isRequired,
updateMethod: PropTypes.string.isRequired,
inputType: PropTypes.string.isRequired,
};
EditInline.defaultProps = {
required: true,
};
EditInline.types = {
textfield: 'textfield',
textarea: 'textarea',
}