有条件地在子组件上渲染父组件屏幕 Form onSubmit() 调用。 (w/react-redux)

Question

我有一个父组件，它在单击按钮时显示一个表单。这个标记为 (+) 的按钮（参见图 1）将导致显示“创建新课程”子组件。在用户提交“创建课程”后，我试图隐藏这个子组件（见图 2）。

我在这里显示的当前方法是在子组件表单中分配一个“onClick”函数，该函数触发父函数将表单切换为隐藏。但是，子表单显然不能同时处理“onSubmit”函数和“onClick”按钮函数。

欢迎提出任何建议或意见。

图片 1

图片 2

父组件

class ContentCreation extends Component {


    constructor(props) {
        super(props);
        this.toggleCreateCourseFormOpen = this.toggleCreateCourseFormOpen.bind(this);
        this.state = {
            (...)
            createCourseFormOpen: false,  <---- USED TO INDICATE IF THE CHILD FORM SHOULD BE DISPLAYED OR NOT
           
            (...)
        };

      }

    //Toggles the "createCourseFormOpen variable from false to true; or from true to false//
    toggleCreateCourseFormOpen() {

            this.setState({createCourseFormOpen: !this.state.createCourseFormOpen})

        }


    render() {

        (...) 

            return ( 

                (...)
                        
                    

                    <div className='row center center-align'>
                        <h4>List of Your Courses</h4>
                            <div className='col l12 s12 m12'>
                            <button className='btn btn-floating custom-orange lighten-1' onClick={this.toggleCreateCourseFormOpen}>{this.state.createCourseFormOpen ? '-' : '+'}</button>
                                
                                
                                {this.state.createCourseFormOpen ? <CreateCourseForm triggerToggleCreateCourseFormOpen={this.toggleCreateCourseFormOpen} /> : ''}
                                            {/* Passing down the courses from the courseReducer into the "CourseList" component. */}
                                        

                                        <CourseList courses={courses}/>
                            
                        </div>

                    </div>

                </div>

            )
        }

(.... Rest Of Code ....)

儿童 (CreateCourseForm.js) 组件

    //Function used when user submits a create course request.
    handleSubmit = (e) => {

        e.preventDefault();
        this.props.createCourse(this.state)

    }

    render() {

        return (

            <div className='container selection create-course green'>

                        <form onSubmit={this.handleSubmit} className='white'>
                            <h5 className='grey-text text-darken-3'>Create a new Course</h5>
            
                            {/* Input field for Course Name*/}
                            <div className='input-field'>
                                <label htmlFor='courseName'>Course Name</label>
                                <input type='text' id='courseName' onChange={this.handleChange}/>
                            </div>

                            {/* Input field for Course Details*/}
                            <div className='input-field'>
                                <label htmlFor='courseDescription'>Course Description</label>
                                <textarea className='materialize-textarea' id='courseDescription' onChange={this.handleChange}>
                                
                                </textarea> 
                                
                            </div>

                            {/* Button used to create the new course.*/}
                            <div className='input-field'>
                                <button onClick={this.props.triggerToggleCreateCourseFormOpen} className='btn custom-orange lighten-1 z-depth-0'>Create Course</button>
                            </div>

                        </form>

            </div>
        )

    }

}

(.... Rest of Code .... )

Answer 1

我认为最好的解决方案是监听一个事件。

  handleSubmit = (e) => {
    
            e.preventDefault();
            this.props.triggerToggleCreateCourseFormOpen(e)
            this.props.createCourse(this.state)
            
    
        }

如果您希望您的代码正常工作。你需要添加类型(type="submit"):

<div className='input-field'>
                                <button type="submit" onClick={this.props.triggerToggleCreateCourseFormOpen} className='btn custom-orange lighten-1 z-depth-0'>Create Course</button>
                            </div>