1

start to learn React.js recently and encounter the following problem: enter image description here

I want to get the div element using getElementById but it doesn't work and the console alerts can not read property 'props' of null. So how can I get the div element? it has troubled me for several hours. Thanks.

nathan
  • 9,329
  • 4
  • 37
  • 51
Dada Jiao
  • 23
  • 1
  • 4
  • 3
    Hi Dada Jiao-- welcome to StackOverflow. You may want to review [ask]. Generally it is considered poor practice to include a link to an image of code. It would be much better to include the code in the question itself, as well as a _explicit_ explanation of what is going wrong. Beyond that, I would remind you that that sort of direct DOM manipulation is not generally what React is all about-- if you _truly_ need a DOM reference review [`ref`](https://facebook.github.io/react/docs/refs-and-the-dom.html) -- but note that often it is not necessary. – Alexander Nied Jul 28 '17 at 05:09
  • 1
    make use of refs instead of directly accessing the DOM, you can refer this answer https://stackoverflow.com/questions/38093760/in-react-js-is-there-any-function-similar-like-document-getelementbyid-in-ja/38093981#38093981 – Shubham Khatri Jul 28 '17 at 05:30

1 Answers1

2

The whole idea with React is that you don't access the DOM, but work with a virtual DOM.

To achieve what you are trying to accomplish (which is a little unclear since the code is incomplete), you'll want to use a stateful component that stores user input on this.state. Check out this page on React forms.

You'll want to do something like this, where you are tracking user input by storing it on the component:

class NameForm 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});
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}
Ezra Chu
  • 832
  • 4
  • 13