React实现双向数据绑定

 这是App.js文件的内容：

import React, { Component } from 'react';
import './App.css';
import Person from './Person/Person';

class App extends Component {
  state = {
    persons:
      [
        { name: "Mrs CoCo", count: 21 },
        { name: "Mrs Maomao", count: 31 }
      ],
    otherState: "anything"
  }

  changeName = (event) =>{
    this.setState(
      {
        persons:
          [
            { name: event.target.value, count: 23 },
            { name: "Mrs Maomao", count: 31 }
          ]
      }
    );
  }

  render() {
    return (
      <div className="App">
        <Person changed={this.changeName} name={this.state.persons[0].name} count={this.state.persons[0].count} >我很高兴！！！</Person>
      </div>
    );
  }
}

export default App;

这是创建的Person.js文件，在页面上有个输入框，当用户在输入框中输入值，将会触发changed方法，App.js中的changed事件，调用changeName方法，event事件对象可以得到input标签中的内容。

import React from 'react';
// const是定义常量
const Person = (elem) => {  // 形参接收，是一个对象
    // return  <p>大家好,我是{elem.name},我的作品有{elem.count}部</p>;
    return (
        <div>
            <p onClick={elem.myClick}>大家好，我是{elem.name},我已经有{elem.count}部作品！</p>
            <p>{elem.children}</p>
            <input type="text" onChange={elem.changed} defaultValue={elem.name}></input>
        </div>  
    );
}

export default Person;  

在执行页面上的输入框输入姓名，P标签的内容，就会同时将用户输入的值，取出放在P标签中。