React 双向数据绑定

版权声明：未经本人同意不得私自转载 https://blog.csdn.net/qq_40190624/article/details/88775691

需求: 我在子组件中的inPut框输入内容的时候,我需要文本中指定的name内容也跟着改变

子组件:

import React from 'react'


const person = (props) =>{
  return(
    <div>
        <p>我的名字叫{props.name}</p>
        <input type="text" onChange={props.changed}/>
    </div>
  )
}
export default person;

父组件:

import React, { Component } from 'react';
import './App.css';
import Footer from './components/layout/Footer';


class App extends Component {
  state={
    persons:[//初始名字
      {
        name:"周家大小姐"
      }
    ]
    
  };
  nameChangedHandler = (event)=>{//event可以得到Input中的内容
    console.log(event.target.value)//修改state中的数据实现双向绑定
    this.setState({
      persons:[
        {
          name:event.target.value
        }
      ]
    })
  }
  render() {
    return (
      <div className="App">
        <Footer name={this.state.persons[0].name}  changed={this.nameChangedHandler}/>
      </div>
    );
  }
}

export default App;

效果:

也可以在子组件加入value,效果会好看一点

import React from 'react'


const person = (props) =>{
  return(
    <div>
        <p>我的名字叫{props.name}</p>
        <input type="text" onChange={props.changed}  value={props.name}/>
        
        {/* 
        或者用defaultValue
        <input type="text" onChange={props.changed}  defaultValue={props.name}/> */}

    </div>
  )
}
export default person;