react-hooks 實現簡單的評論list

react 16.7.0-alpha.2版本中推出了新版本的react-hook,詳細的能夠參照官方文檔, 下面我講用react-hooks實現簡單的評論listjavascript

效果圖:

demo總體架構使用react 16.8 + webpack + antd-mobilehtml

源代碼:

  • 建立輸入框hooks
    const [list, setList] = useState([{name: 'mark'}, {name: 'joan'}]);
     const [value, setValue] = useState('');
    
     <List style={{margin:'10px auto'}}> <InputItem value={value} placeholder="請輸入詳細信息" onChange={value => setValue(value)} /> </List> 複製代碼
  • Button
    const publish = () => {
        setList(list.concat([{name:value}]));
        setValue('');
     }
    
     <Button type='primary' onClick={()=> publish()}>評論</Button>
    複製代碼
  • list
const removeTodo = index => {
        const todoList = [...list];
        todoList.splice(index,1);
        setList(todoList);
      }
     <ul>
        {list.map((item,index) => <li key={index}>{item.name} <span onClick={() => removeTodo(index)}>刪除</span></li>)}
     </ul>
複製代碼

完整代碼

import React, { useState, useEffect} from 'react';
import {Button, InputItem, List} from 'antd-mobile';

const Home = () => {
  const [list, setList] = useState([{name: 'mark'}, {name: 'joan'}]);
  const [value, setValue] = useState('');
  const removeTodo = index => {
    const todoList = [...list];
    todoList.splice(index,1);
    setList(todoList);
  }
  const publish = () => {
    setList(list.concat([{name:value}]));
    setValue('');
  }
  useEffect(()=>{
    console.log('list變化了');
  }, [list])
  return (
    <div style={{margin: "0 30px"}}> <List style={{margin:'10px auto'}}> <InputItem value={value} placeholder="請輸入詳細信息" onChange={value => setValue(value)} /> </List> <Button type='primary' onClick={()=> publish()}>評論</Button> <ul> {list.map((item,index) => <li key={index}>{item.name} <span onClick={() => removeTodo(index)}>刪除</span></li>)} </ul> </div> ) } 複製代碼

這裏只用了useState 和 useEffect 也是最經常使用的兩個hook ,固然遠遠不止這兩個hook, 你們能夠參考官方文檔查看更多。java

相關文章
相關標籤/搜索