Dumb data binding

dumb-data-binding.markdown

Dumb data binding

A Pen by Attila SATAN on CodePen.

License.

index.html

<div id="root">
  <!-- This div's content will be managed by React. -->
</div>

script.babel

const Resource = {
        _data: 'react is meh!',
        get data(){return this._data;},
        set data(d){
            this._data = d; 
            for(let obsvr of this.observers){
                obsvr(this._data)
            }
        },
        observers: []
};

class FeelingInput extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.onDataChange = this.onDataChange.bind(this);
    this.state = {feeling: Resource.data};
    Resource.observers.push(this.onDataChange)
  }

  onDataChange(d){
    console.log(arguments)
    this.setState({
      feeling: d
    });
  }
  handleChange(e) {
    Resource.data = e.target.value;
  }

  render() {

    return (
      <fieldset>
        <legend>What do you feel about React?:</legend>
        <input value={this.state.feeling}
               onChange={this.handleChange} />
      </fieldset>
    );
  }
}

class Op extends React.Component {
  constructor(props) {
    super(props);
        this.state = {temperature: '', scale: 'c'};
  }

  render() {


    return (
      <div>
        <FeelingInput/>
        <FeelingInput/>
      </div>
    );
  }
}

ReactDOM.render(
  <Op />,
  document.getElementById('root')
);

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js"></script>