React Hook 组件通信

React Hook 组件通信 与 以前版本思路一致，不多介绍，直接贴代码！！todoList为例子, 代码里还包含了className的新方式

父组件

import React, {useState} from 'react';
import {Button, Input, Message} from '@alifd/next';
import List from './components/list';
import styles from './index.module.scss';

export default function TodoList() {
  const [inputValue, setInputValue] = useState('');
  const [list, setList] = useState(["第一条", "第二条", "第三条", "第四条"]);

  function deleteListItem(index) {
    list.splice(index, 1);
    setList([...list]);
  }

  return (
    <div className={styles.todoList}>
      <div className={styles.todoSo}>
        <Input
          placeholder="请输入"
          value={inputValue}
          onChange={(e) => {
            setInputValue(e);
          }}
          className={styles.todoInput}/>
        <Button
          type="primary"
          className={styles.todoButton}
          onClick={() => {
            if (inputValue)
              setList([...list, inputValue]);
            else
              Message.error('输入不能为空');
            setInputValue('');
          }}>添加</Button>
      </div>
      <ul className={styles.todoUl}>
        {list.map((item, index) => (
          <List key={index} item={item} index={index} deleteItem={deleteListItem}/>
        ))}
      </ul>
    </div>
  );
};

子组件

import React from 'react';

export default function List(props) {  //props接收
  function delItem(index) {
    props.deleteItem(index);
  }

  return (
    <li onClick={delItem.bind(this, props.index)}>{props.index} - {props.item}</li>
  );
};