javascript - 尝试为变量分配新值时无法读取“状态”

Question

所以我基本上想在按下“创建”按钮时创建 <\CreatedTask/> 。我设置了函数 onClick 并在 render() 中创建了一个“null”变量，一旦按下“Create”按钮，我希望它为 <\CreatedTask props props props/> 的变量分配一个新值。我的代码：

import React, { Component } from 'react';
import './CreateTask.css'
import CreatedTask from '../CreatedTask/CreatedTask';
import Aux from '../../hoc/Aux';

class CreateTask extends Component {
    constructor(props){
        super(props);
        this.state = {
            member : '',
            toDo : '',
            dod : '',
            time : ''
        };
        this.changeHandler = this.changeHandler.bind(this);


    }

    changeHandler = (event) => {
     this.setState(
        {[event.target.name] : event.target.value}
     ) 
    }
    clearFields = () => {
        this.setState({
            member : '',
            toDo : '',
            dod : '',
            time : ''
        })
    }


    render() {
        let tasksubmit = null;
        function submitTask(){

            return( 
                tasksubmit = <CreatedTask
                member = {this.state.member}
                todo = {this.state.toDo}
                dod = {this.state.dod}
                time = {this.state.time}
             />);  

        }
        console.log(tasksubmit);
    return(
        <div>
            <div className="CreateTask">
                <p>Group member:
                <select id="groupMember" 
                    onChange={this.changeHandler}
                    name="member"
                    >
                        <option value='' disabled selected>Select group member</option>
                        <option value="Berin">Berin</option>
                        <option value="Raddy">Raddy</option>
                        <option value="Ventsi">Ventsi</option>
                        <option value="Cristian">Cristian</option>
                </select>          
                </p>
                <p>To do:<input 
                            type="text" 
                            id="toDo"
                            name="toDo" 
                            value={this.state.toDo} 
                            onChange={this.changeHandler}>
                         </input>
                </p>
                <p>Definiton of done:
                    <textarea 
                        id="dod" 
                        name="dod"
                        value={this.state.dod} 
                        onChange={this.changeHandler}>
                    </textarea>
                </p>
                <p>Average time required(hours):
                    <input 
                        value = {this.state.time}
                        onChange = {this.changeHandler}
                        type="number" 
                        min="0" 
                        id="time" 
                        name="time">
                    </input>
                </p>
                <div>
                <button type="submit" onClick = {this.clearFields}>Cancel</button>
                <button type="submit" onClick = {submitTask}>Create</button>
                </div>

            </div>
            {tasksubmit}

        </div>
    );
    }
}

export default CreateTask;

我不知道可能是什么问题。我是 React 初学者，也是 StackOverflow 社区的新手。

标签： javascriptreactjs