通过组件传入方法实现组件通信,本学习事例可以添加和删除数据

App.tsx

import React from 'react';
import './App.css';
import Form from "./components/Form/Form";
import List from "./components/List/List";
type dataType = {name: string,age: number,like: string,sex: string};
class App extends React.Component<any,any>{
  constructor(props:any) {
    super(props);
    this.state = {
      list:[{
        name: 'name1',
        age: 15,
        like: '篮球',
        sex: '男'
      },{
        name: 'name2',
        age: 19,
        like: '足球',
        sex: '女'
      },{
        name: 'name3',
        age: 25,
        like: '打游戏',
        sex: '男'
      },]
    }
  }
  addMsg = (data:dataType):void=>{
    let list = this.state.list;
    list.push(data);
    this.setState({
      list
    })
  }
  del = (index:number):void=>{
    let list = this.state.list;
    list.splice(index,1);
    this.setState({
      list
    })
  }

  render() {
    return (
      <>
        <Form title={"abc"}  addmsg={this.addMsg}></Form>
        <List list={this.state.list} del={this.del}></List>
      </>
    );
  }

}

export default App;

form.tsx

import React, {ChangeEvent, Component} from 'react';

type dataType = {name: string,age: number,like: string,sex: string};
type stateType = {
  formData:{name: string,age: number,like: string,sex: string}
}

type protype = {
  title: string,
  addmsg: (data: dataType) => void
};
class Form extends Component<protype,stateType> {
  constructor(props:protype) {
    super(props);
    this.state = {
      formData:{
        name: '',
        age: 0,
        like: '篮球',
        sex: '男'
      }
    }
  }
  submitFn=():void=>{

    const {addmsg} = this.props;
    addmsg(this.state.formData);

  }
  dataChange=(event:ChangeEvent<HTMLInputElement|HTMLSelectElement>, v:string):void=>{
     if(!event.target.value){
       return;
     }
     let formData = this.state.formData;
     if(v === 'name'){
       formData.name = event.target.value;
     }else if(v=== 'age'){
       formData.age = Number(event.target.value);
     }else if(v=== 'like'){
       formData.like = event.target.value;
     }else if(v=== 'sex'){
       formData.sex = event.target.value;
     }
      this.setState({
        formData
      })
  }
  render() {
    const { name, age, like, sex } = this.state.formData;
    return <>
      <form action="" onSubmit={()=>(this.submitFn())}>
        <div className="form-control">
          <span className="label">名字：</span>
          <input type="text" className={"formInput"} value={name} onChange={(event)=>(this.dataChange(event,'name'))} placeholder={"请输入名字"}  />
        </div>
        <div className="form-control">
          <span className="label">年龄：</span>
          <input type="number" className={"formInput"} value={age} onChange={(event)=>(this.dataChange(event,'age'))} placeholder={"请输入年龄"}  />
        </div>
        <div className="form-control">
          <span className="label">性别：</span>
          <select className={"formInput"} value={sex} onChange={(event)=>(this.dataChange(event,'sex'))}>
            <option>男</option>
            <option>女</option>
          </select>

        </div>
        <div className="form-control">
          <span className="label">爱好：</span>
          <select className={"formInput"} value={like} onChange={(event)=>(this.dataChange(event,'like'))} >
            <option>打篮球</option>
            <option>跑步</option>
          </select>

        </div>
        <div className="form-control">
          <input type="submit" value={"提交"}/>
        </div>

      </form>
    </>;
  }
}

export default Form;

list.tsx

import React, {Component} from 'react';

class List extends Component
  <{
    list: any[],
    del
      :
      (index: number) => void
  }> {
  constructor(props:{
                  list: any[],
                  del:(index: number) => void
                }
  ) {
    super(props);

  }
  del = (index: number):void=>{
    const {del} = this.props;
    del(index);
  }
  render() {
    const {list} = this.props;
    return <>
      {list.map((item, index) =>
        <div className="list-items" key={index}> {item.name} +++ {item.age}+++{item.sex}+++{item.like}
          <button onClick={()=>this.del(index)}>删除</button>
        </div>
      )}
    </>;
  }
}

export default List;

如有错误请指出交流

好好学习,天天向上!