Data binding in React

Question

What I want to do is when I type some text in an input field, it should appear in another place realtime.

Below is my input;

<div className="post_input">     <input className='post_data_input_overlay' placeholder="Ask your question here" ref="postTxt"/> </div> 

How can I achieve that?

Answer 1

Data binding in React can be achieved by using a controlled input. A controlled input is achieved by binding the value to a state variable and a onChange event to change the state as the input value changes.

See the below snippet

class App extends React.Component {   constructor() {     super();     this.state = { value: 'Hello World' };   }   handleChange = (e) => {     this.setState({ value: e.target.value });   };   render() {     return (       <div>         <input           type="text"           value={this.state.value}           onChange={this.handleChange}         />         <p>{this.state.value}</p>       </div>     );   } }  ReactDOM.render(<App />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script> <div id="app"></div>

---

Update: React Hooks

Here is an equivalent function component of the class defined above.

const { useState } = React;  const App = () => {   const [value, setValue] = useState('Hello World');   const handleChange = (e) => setValue(e.target.value);   return (     <div>       <input type="text" value={value} onChange={handleChange} />       <p>{value}</p>     </div>   ); };  ReactDOM.render(<App />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.14.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.14.0/umd/react-dom.production.min.js"></script> <div id="app"></div>

Answer 2

To be short, in React, there's no two-way data-binding.

So when you want to implement that feature, try define a state, and write like this, listening events, update the state, and React renders for you:

class NameForm extends React.Component {   constructor(props) {     super(props);     this.state = {value: ''};      this.handleChange = this.handleChange.bind(this);   }    handleChange(event) {     this.setState({value: event.target.value});   }    render() {     return (       <input type="text" value={this.state.value} onChange={this.handleChange} />     );   } } 

Details here https://facebook.github.io/react/docs/forms.html

UPDATE 2020

Note:

LinkedStateMixin is deprecated as of React v15. The recommendation is to explicitly set the value and change handler, instead of using LinkedStateMixin.

above update from React official site . Use below code if you are running under v15 of React else don't.

There are actually people wanting to write with two-way binding, but React does not work in that way. If you do want to write like that, you have to use an addon for React, like this:

var WithLink = React.createClass({   mixins: [LinkedStateMixin],   getInitialState: function() {     return {message: 'Hello!'};   },   render: function() {     return <input type="text" valueLink={this.linkState('message')} />;   } }); 

Details here https://facebook.github.io/react/docs/two-way-binding-helpers.html

For refs, it's just a solution that allow developers to reach the DOM in methods of a component, see here https://facebook.github.io/react/docs/refs-and-the-dom.html