问题描述
我已经制作了一个对象数组，我想在从表单中获取值后更改组件的状态。
这是我用于任务组件的代码。我有一个想法，我可以在componentDidUpdate函数中执行该操作，但是如何更新该组件呢？
import React from 'react';
import Popup from 'reactjs-popup';
import Form from './Form.js';
import {Row,Col,Container} from 'reactstrap';
class Task extends React.Component{
constructor(props){
super(props);
this.state={
tasks:[
{id:'1',name:'demo task1',description:'task
description',priority:'low',date:'1/1/2020'},{id:'2',name:'demo task2',description:'task description',date:'1/1/2020'}
]
};
}
handleShow(e,ID){
alert(ID);
const {tasks}=this.state;
const expensiveItems = tasks.filter(item => item.id == ID);
console.log(`Expensive Items: ${expensiveItems.map(item => item.name).join(',')}`)
console.log(`Expensive Items: ${expensiveItems.map(item => item.date).join(',')}`)
}
handleSubmit(){
alert(document.getElementsByName("name"));
alert(document.getElementsByName("description"));
alert(document.getElementsByName("priority"));
alert(document.getElementsByName("date"));
}
componentDidUpdate(prevProps,prevstate){
if(prevstate.tasks!=this.state.tasks)
alert('component updated.');
else
alert('component did not update');
}
render(){
const {showForm} =this.state;
return(
<div>
<br/>
<Popup modal trigger={<button className="button">Add Task</button>}>
<form >
<div className="form-group row">
<label htmlFor="name" className="col-sm-2 col-form-label">Task Name:
</label>
<div class="col-sm-10">
<input type="text"
class="form-control"
name="name"
id="name"
placeholder="do laundary"
onChange={this.handleChange}></input>
</div>
</div>
<div className="form-group row">
<label htmlFor="TaskDescription" class="col-sm-2 col-form-
label">Description: </label>
<div class="col-sm-10">
<input type="text"
class="form-control"
name="description"
id="description"
placeholder="start diong task at 11:00 am......"
onChange={this.handleChange}></input>
</div>
</div>
<div className="row">
<legend className="col-form-label col-sm-2 pt-0">Task Priority</legend>
<div className="col-sm-10">
<div className="form-check">
<input className="form-check-input"
type="radio"
name="op"
id="priority"
value="Low"
onChange={this.handleChange}></input>
<label className="form-check-label" htmlFor="priority">
Low
</label>
</div>
<div className="form-check">
<input className="form-check-input"
type="radio"
name="op"
id="priority"
value="medium"
onChange={(e)=>this.handleChange}></input>
<label className="form-check-label"htmlFor="priority">
Medium
</label>
</div>
<div className="form-check disabled">
<input className="form-check-input"
type="radio"
name="op"
id="priority"
value="option3"
onChange={this.handleChange}></input>
<label className="form-check-label" htmlFor="priority">
High
</label>
</div>
</div>
</div>
<div className="form-group row">
<label htmlFor="name" className="col-sm-2 col-form-label">Task date:
</label>
<div className="col-sm-10">
<input type="date"
className="form-control"
name="date"
id="date"
onChange={this.handleChange}></input>
</div>
</div>
<div className="form-group row">
<div class="col-sm-10">
<button type="submit"
className="button"
onClick={this.handleSubmit}>
Save task</button>
</div>
<div class="col-sm-10">
<button type="submit"
className="button" >
Cancel</button>
</div>
</div>
</form>
</Popup>
<br/>
<div>
<ol>
{this.state.tasks.map(item=>(
<li key={item.id} onClick={(e)=>this.handleShow(e,item.id)}
className="task-select">The task name is {item.name}</li>
))}
</ol>
</div>
</div>
)
}
}
export default Task;
p.s：我是新来的反应者，因此我无法理解如何设置组件状态。
解决方法
您的handleChange函数在哪里？
您可能会具有handleChange和handleSubmit函数，如下所示：-
handleChange (e) {
const { id,value } = e.target;
this.setState({
[id]: value // this will set the values of id,name,description,date,priority
});
}
handleSubmit () {
const { id,priority,tasks } = this.state;
const newTask = { id,priority };
this.setState({
tasks: [ ...tasks,newTask ],// add new task.
// reset form values
id: '',name: '',description: '',date: '',priority: ''
});
}