React form doesn't keep it's status

Question

Please have a Pen attached https://codepen.io/Kiszuriwalilibori/pen/qYEYOO?editors=1111

class Parent extends React.Component {
  constructor(props) {
    super(props);

    this.state = { meta: 'x' };

    this.changeName = this.changeName.bind(this);
  }

  changeName(newName) {
    this.setState({
      meta: newName
    });
  }

  render() {
    console.log('parent-meta '+this.state.meta);
    return (
      <div>
        <Meta onSubmit={this.changeName} />
       <h1>Parent</h1>
      </div>
    );
  }
}


class Meta extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value.split(/\D/).join('') });
    console.log('handleChange wykonane');
  }

  handleSubmit(event) {//to jest odpowiednik handlechange
    const dupa= this.state.value;
console.log ('dupa '+ dupa);
   this.props.onSubmit(dupa);
   console.log('handlesubmit this.state.value'+ this.state.value);//onSubmit musi olecieć wyżej i byc ma ztym dziecko wywoływane

  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" /> <br/>
        Binded attr to input: {this.state.value}
      </form>
    );
  }
}

ReactDOM.render(<Parent />, document.getElementById("root"));

And the problem is that:

You see here relatively simple Parent and Meta React Classes. Parent renders Meta which opens a form. The form hass Submit button, and Parent takes input string to its state after submit button is pressed.

However, what actaully happenslater is rather unwelcome ( at least from my point of view, the logic of the code might be totally different). Parent really takes value from Meta, but in seconds the 'good' value disappears and it takes back default value. I also observed that good value is kept as long as Submit button is active -looking. I would rather keep the good value, how to preserve that unwelcome refreshing?

You have the `Parent` component being returned in the render of said element. That triggers an alert to me. I'm not sure that can be done that way — Rodius, Apr 19 '18 at 16:15
Where are you using that value `state.meta` in the view? If it's not being used don't expect it to save. — Train, Apr 19 '18 at 16:29

score 0 · Answer 1 · answered Apr 19 '18 at 19:58

The reason that everything resets is because you have a submit handler on the form. Although the form has a function bound to onSubmit, it still carries out the default form action which is POST. It looks like everything is resetting, but it's actually the page refreshing. See Setting onSubmit in React.js

You have two options:

run event.preventDefault() in your handleSubmit (codepen)
change the input into a button, and use the onClick event which will not do a POST.

React form doesn't keep it's status

1 Answers1