在 React 中存储数据

Question

I'm actually new to React, and can't choose, what is the best way to store data in a situation like this: I have a form with some inputs, and I need to do some actions with all data from these inputs on submit. All inputs are stored in one Component. So, I need to get all the data only on submit. And now I'm trying to choose the best way to store this data. I see 2 ways:

• Storing data in the state. But as React Docs describes:

  "Only data which need to render may store in the state."

  But I don't need this data for render, I need to work with this only on submit.

• Storing as class variables. It looks good for me, because when i using state, i need to call setState(), which trigger render(which i don't need), or this.state.data = ....But React Docs says that:

  "You may change state directly only in constructor."

So, which of these ways are better and why?

Answer 1

I think you're overthinking it, just stick with controlled components and manage your form data through state.

However, if you really don't want to use controlled components because you don't want the render method to be called then you don't have to.

This is because form elements work a little bit differently from other DOM elements in React, because in HTML, form elements such as <input> , <textarea> , and <select> naturally maintain their own state and update it based on user input. See official forms docs .

And React doesn't take that away from you. This means that you can make use of forms the same way you would with vanilla JS.

Also worth mentioning that in React world this way of leaving data to be purely handled by the DOM rather than handling it with a React Component is known as Uncontrolled Component .

Implementation

As far as how this would look in practise, I can think of two ways that you can do this, one would be with refs :

handleSubmit = (e) => {
  e.preventDefault();
  console.log(this.input.value); // whatever you typed into the input
}

render() {
  return (
    <form onSubmit={this.handleSubmit}>
      <input type="text" name="name" ref={input => this.input = input} />
      <input type="submit" value="submit" />
    </form>
  );
}

Another way would be through an event object:

handleSubmit = (e) => {
  e.preventDefault();
  console.log(e.target.name.value); // whatever you typed into the input
}

render() {
  return (
    <form onSubmit={this.handleSubmit}>
      <input type="text" name="name" />
      <input type="submit" value="submit" />
    </form>
  );
}

Answer 2

For storing formularies I would definitely choose to store data in the state, if you look at the React form official documentation they explain what I think is your case.

The standard you will see the most, as far as I know, is this:

class Form extends Component {
    constructor (props) {
    super(props)
    this.state = {
      name: '',
      surname: ''
    }
  }

  handleSubmit = (e) => {
    e.preventDefault();
    // send data from the actual state
  }

  handleChange = (e) => {
    this.setState({[e.target.name]: e.target.value})
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input type="text" name="name" onChange={this.handleChange} />
        <input type="text" name="surname" onChange={this.handleChange} />
        <input type="submit" value="submit" />
      </form>
    )
  }
}

Take a look at this JSFiddle I did for you! And check your console when sending the input.

Answer 3

You might want to check out redux-form . Its great tool for form validation!

Its a bit of a challenge to get started with, but really smooth once you get the hang of it.

Also the docs are great.

Answer 4

This question showed up for in a google search just now so I thought I'd recommend formik https://github.com/jaredpalmer/formik

its very robust and performant + its nice if you dont want form state in your redux store