javascript - reactJS how to change between many application states -
new reactjs , trying have 1 of components alternate through many crud states (creating object, listing objects, updating objects, deleting objects), each 1 display appropriate forms...
i thinking cannot see if thinking flawed.
constructor() { super(props); this.state = { list: true, edit: false, create: false, // , on crud operations }
then later there method...
handlecrudviewchange(newview) { // flip false... // turn correct 1 true }
then in render this...
switch (true) { case this.state.list: <listcomponent /> case this.state.edit: <editcomponent /> // , on... }
is thinking sound? "react" way things?
yes, on right track. may want simplify bit -
const modes = {list: 0, edit: 1, create: 2}, crud_components = [listcomponent, editcomponent, createcomponent]; constructor(){ this.state = {"mode" : modes.list}; }, handlecrudviewchange(newview) { // decide relevantmode value out of list, edit or create based on logic // , update state this.setstate({"mode": modes[relevantmode]}); } render(){ let component = crud_components[this.state.mode]; return <component />; }
in simple example, not having send crud mode specific state component, while in real case, may have write more logic store mode-specific props , pass them selected mode component.
Comments
Post a Comment