所以我基本上想在按下“创建”按钮时创建<\ CreatedTask />。我设置函数onClick并在render()中创建了一个“空”变量,一旦按下“创建”按钮,我希望它为该变量分配一个新值,即<\ 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社区的新手。