React 动态数据绑定修改对应的input框更新对应的文本内容

需求:以下的输入框我修改哪个,哪个对应的文本内容及时更新 

子组件:

const person = (props) =>{
  return(
    <div className="footer">
        <p onClick={props.presonHandler}>我的名字叫{props.name}</p>
        <input type="text" onChange={props.changed} defaultValue={props.name} />
    </div>
  )
}

 父组件:

import Footer from './components/layout/Footer';
class App extends Component {
  state = {
    persons: [
      {
        name: "周家大小姐",
        id: 0
      }, {
        name: "陈家大小姐",
        id: 1
      },
      {
        name: "花家大小姐",
        id: 2
      },
      {
        name: "牛家大小姐",
        id: 3
      },
      {
        name: "黄家大小姐",
        id: 4
      },
      {
        name: "郑家大小姐",
        id: 5
      },
      {
        name: "陈家大小姐",
        id: 6
      },
      {
        name: "李家大小姐",
        id: 7
      },

    ]

  };
  // 输入框事件双向绑定
  NameChanged = (event, id) => {//需求:改变输入框的内容,对应的文本内容也修改
    // findIndex为es6中的方法返回对应的下标
    const presonIndex = this.state.persons.findIndex(p => {
      // 如果ID相等的话就返回回去
      return p.id === id
    })
    // 获取当前修改内容的state对象属性及值
    const person = { ...this.state.persons[presonIndex] }
    // 修改名字
    person.name = event.target.value;
    const persons = [...this.state.persons]
    // 把当前修改过的值赋给对应下标的文本
    persons[presonIndex] = person;
    // 更新state内容
    this.setState({
      persons: persons
    })
  }
  render() {
    return (
      <div className="App">
        <button onClick={this.click}>显示与隐藏</button>
        <Footer
          name={person.name}
          v-if="showPreson" key={index}
          presonHandler={() => this.presonDelet(index)}
          changed={(event) => this.NameChanged(event, person.id)}
        />
      </div>
    );
  }
}

export default App;