~~~ //src>routes>indexpages import React from 'react'; import { connect } from 'dva'; import styles from './IndexPage.css'; function IndexPage(props) { const additem = () => { // const value = document.querySelector('input').value; // 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); ~~~ ~~~ // src>models>example.js export default { namespace: 'example', state: { list: [], value: '' }, subscriptions: { setup({ dispatch, history }) { }, }, effects: { *fetch({ payload }, { call, put }) { // eslint-disable-line yield put({ type: 'save' }); }, }, reducers: { save(state, action) { return { ...state, ...action.payload }; }, //接收傳遞過來的type和value并將其展開和state一起返回，換回出來的數據可供全局使用，在handleadd中可使用 handleChange(state, value) { // console.log(value.value) return { ...state, value: value.value }; }, //將handlechange中的 handleAdd(state, args) { //經過判斷將value的值添加到list中去（value是handlechange中返回的value，此處的list是頁面上要渲染的數據） // console.log(args) if (!state.list.includes(state.value)&&!state.value=='') { state.list.push(state.value); } // console.log(state.list) //處理函數里面一定要有return函數，且return后面的語句不執行 return { list: state.list, value:'' } }, deleteitem(state, args) { // console.log(args.index) //不能直接修改state中的值，要復制一份進行修改state中的數據 var newlist = args.list.slice(0); // console.log(newlist) newlist.splice(args.index, 1); // const list =[1,2,3] // console.log(newlist) return { list:newlist } } }, }; ~~~