Question

我目前正在开发我的第一个Fullstack小应用程序。我正在“添加任务表单”中工作，但无法正常使用“ handleSubmit”函数，因此该函数在redux reducer上调用我的操作并实际上命中了API并创建了任务。我有点不了解我的错误在哪里。我将非常感谢对此的任何帮助/指导...

在我的项目列表上点击“添加任务”按钮后，我呈现以下组件：（对不起，我的长组件很抱歉，但是由于我不知道我的错误在哪里，所以最好向你展示整个组件..）

    export class AddEditTaskForm extends Component {
        constructor(props) {
            super()
            this.state = {
                name: '',
                notes: '',
                timeSpent: ''
            }
        }

        handleChange = e => {
            this.setState({ [e.target.name]: e.target.value })
        }

        handleSubmit = e => {
            e.preventDefault();
            const newTask = this.state;
            this.props.add({ ...newTask });
        }
  return <div>
                <h1>Add a Task</h1>
                <div className="form-fields">
                    <FormControl onSubmit={this.handleSubmit}>
                        <InputLabel htmlFor="name-simple">
                            Task Name
                    </InputLabel>
                        <Input id="name-simple" type="text" name="name" value={this.state.name} onChange={this.handleChange} />
                    </FormControl>
                    <FormControl>
                        <InputLabel htmlFor="name-simple">
                            Task Notes
                    </InputLabel>
                        <Input id="name-simple" type="text" name="notes" value={this.state.notes} onChange={this.handleChange} />
                    </FormControl>
                    <FormControl>
                        <InputLabel htmlFor="name-simple">
                            Time Spent
                    </InputLabel>
                        <Input id="name-simple" type="text" name="timeSpent" value={this.state.timeSpent} onChange={this.handleChange} />
                    </FormControl>
                    <ListItem>
                    <Button variant="contained" type = "submit" color="primary" href="#add-project">
                        Submit Task
                    </Button>
                    </ListItem>
                </div>
            </div>;
        }
    }
}

const mapDispatchToProps = dispatch => ({
    add: item => dispatch(goAddToDb(item)),
    update: item => dispatch(goUpdateInDb(item)),
    delete: item => dispatch(goDeleteFromDb(item))
})

AddEditTaskForm.propTypes = {
    request: propTypes.string.isRequired,
    projectId: propTypes.number
};

export default connect(null, mapDispatchToProps)(AddEditTaskForm)

这是我的表单缩减程序（我认为这很好，但我没有遇到问题）

...

export const goAddToDb = item => {
    if (item.notes) {
        return async dispatch => {
            const { data } = axios.post('api/task', item)
            dispatch(addedToDb(data))
        }


const formReducer = (state= initialState,action ) => {
    switch(action.type){
        case ADDED_TO_DB: {
            return {...action.item, success:true}
        }
        case UPDATED_IN_DB: {
            return { ...action.item, success: true }
        }
        case DELETED_FROM_DB: {
            return { ...action.item, success: true }
        }
        default:
        return state;
    }
}

非常感谢您的帮助！！

使用材料UI在React Form中的handleSubmit和axios请求

0 个答案: