import React from 'react' ; import axios , { Urls } from '../api/axios.strict' ; interface Props { refreshTodos : ( ) => void ; } const TodoForm = ( { refreshTodos } ) => { const [ name , setName ] = React . useState ( '' ) ; const onChange = ( e ) => { setName ( e . target . value ) ; } ; const onSubmit = ( e ) => { e . preventDefault ( ) ; const newTodo = { id : Math . random ( ) , name , done : false } ; if ( name . trim ( ) ) { axios ( Urls . ADD , newTodo ) ; refreshTodos ( ) ; setName ( '' ) ; } } ; return ( < form className = "todo-form" onSubmit = { onSubmit } > < input className = "todo-input" value = { name } onChange = { onChange } placeholder = "请输入待办事项" / > < button type = "submit" > 新增 < /button> < /form>); } ; export default TodoForm ;