### 1. 定義事件 ~~~ <input onChange={ async e => { // e.persist() await handleChange(e) }} value={props.value} onKeyPress={keyupadditem}/> <button onClick={additem}>添加</button> ~~~ ### 2. 事件處理 ~~~ const additem = () => { // console.log(props) //把跟新后的數據放在list中傳遞過去進行跟新 const actionchadd = { type: 'example/handleAdd', // list: props.list } props.dispatch(actionchadd); } const keyupadditem=(e)=>{ if (e.which !== 13) return // console.log('你按了回車鍵...') additem() } ~~~ ### 3. 整體展示 ~~~ import React from 'react'; import { connect } from 'dva'; import styles from './IndexPage.css'; function IndexPage(props) { const additem = () => { // console.log(props) //把跟新后的數據放在list中傳遞過去進行跟新 const actionchadd = { type: 'example/handleAdd', // list: props.list } props.dispatch(actionchadd); } const keyupadditem=(e)=>{ if (e.which !== 13) return // console.log('你按了回車鍵...') additem() } //獲取輸入框中的值 const handleChange = (e) => { const actionchange = { type: 'example/handleChange', value: e.target.value } props.dispatch(actionchange); // console.log(e.target.value) } const deleteitem = (e) => { // console.log(e) const actiondeleteitem = { type: "example/deleteitem", index: e, list: props.list } props.dispatch(actiondeleteitem) } return ( <div className={styles.normal}> <input onChange={ async e => { // e.persist() await handleChange(e) }} value={props.value} onKeyPress={keyupadditem}/> <button onClick={additem}>添加</button> <ul> {props.list.map((item, index) => { return <li key={index}><div><span>{item}</span><button onClick={deleteitem.bind(this, index)}>刪除</button></div></li> })} </ul> </div> ); } // IndexPage.propTypes = { // }; //用于連接模板文件與models文件 export default connect(({ example }) => { return { //接收models的state中的數據 list: example.list, value: example.value } })(IndexPage); ~~~