title: React wrong & right practices with form elements
body: <p>Hyall</p>
  
  <p>Can you please point out bad practices / mistakes in the code below?</p>
  
  <pre><code>class App extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        title: "default title"
      };
      this.inputTxt = this.state.title;
  
      this.myRef = React.createRef();
    }
  
    componentDidMount() {
      this.myRef.current.value = this.inputTxt;
    }
  
    handleSubmit = e =&gt; {
      e.preventDefault();
      console.log("submitted");
      this.setState({ ...this.state, title: this.inputTxt });
    };
  
    handleInput = e =&gt; {
      this.inputTxt = e.target.value;
    };
  
    render() {
      return (
        &lt;&gt;
          &lt;div&gt;{this.state.title}&lt;/div&gt;
          &lt;form onSubmit={this.handleSubmit}&gt;
            &lt;input
              type="text"
              onChange={this.handleInput}
              ref={this.myRef}
            &gt;&lt;/input&gt;
            &lt;button type="submit"&gt;Save&lt;/button&gt;
            &lt;button type="reset"&gt;Reset&lt;/button&gt;
          &lt;/form&gt;
        &lt;/&gt;
      );
    }
  }
  </code></pre>
  
  <p>And some special questions:</p>
  
  <ol>
  <li><p>is it ok to use this.somevar properties of component class to store variables' values? how to avoid naming collisions?</p></li>
  <li><p>is it normal to use refs to set input's value?</p></li>
  <li><p>if I want to set onChange and value bound to reactive variable in one input control, it will freeze? how to gain [(ngModel)] Angular-like control over input element?</p></li>
  </ol>