我想获得以下效果:单击按钮->呼叫功能切换->将单击项的索引保存为this.state.index->显示编辑表格—>将被单击元素的数据获取为->形式编辑数据->救
尝试调用切换功能并以某种状态写入索引时,索引不会保存.将索引保存为状态后,我想使用它并可以访问todo = this.state.todos [this.props.index]中被单击的元素.我在form属性中发送单击的待办事项的数据.在表单中,他通过value = this.props.todo.date来引用它.我正在使用日期选择器反应库.有人可以指导我吗?
应用程式
class App extends Component {
constructor() {
super();
this.state = {
todos: [],
index: null,
editing: false
};
}
update = (propertyName) => (event) => {
const { todo } = this.state;
const newTodo = {
...todo,
[propertyName]: event.target.value
};
this.setState({ todo: newTodo });
}
toggle = (index) => {
this.setState({
editing: !this.state.editing,
index: index
})
}
createTodo = (todo) => {
const new = this.state.todos.slice();
new.push(todo);
this.setState({todos: new});
}
render () {
return (
<ul>
{
this.state.todos
.map(index => {
<Todo
key= {index}
index = {this.state.index}
toggle = {this.toggle}
todo={this.state.todos[index]}
editing = {this.state.editing}
update = {this.update}
/>
})
}
</ul>
);
}
}
export default App;
托多/托多
class Todo extends Component {
render() {
if (this.props.isEditing) {
return (
<EditForm
todo = {this.props.todos[this.props.index]}
update = {this.props.update}
/>
)
}
return (
<li>
<div>
{this.props.todo.date}
</div>
<div>
{this.props.todo.description}
</div>
<button onClick={() => this.props.toggle(index)}></button>
</li>
)
}
}
export default Todo;
editForm / EditForm
class EditForm extends Component {
constructor(){
super();
this.state = {
startDate: new Date()
}
}
todo(e) {
event.preventDefault();
const todo = {
date: this.state.startDate,
description: this.desc.value
}
this.props.addTodo(todo);
}
handleChange = (date) => {
this.setState({
startDate: date
});
}
render() {
return (
<form onSubmit={(e) => this.todo(e)}>
<DatePicker
selected={this.state.startDate}
onChange={this.update('date')} value=
{this.state.todo.date}
showTimeSelect
timeFormat="HH:mm"
value={todo.date}
dateFormat="yy-MM-dd, hh:mm"
timeCaption="time"
/>
<textarea ref={(input) => this.description = input} value=
{todo.description} onChange={this.update('description')}
value={this.state.todo.description}></textarea>
<button type="submit">Save</button>
</form>
)
}
}
export default EditForm;
解决方法:
让每个待办事项管理其状态,在编辑时它将显示该待办事项的表单.
class Todo extends Component {
state = {
isEditing: false,
startDate: new Date(),
description: '',
}
setEditing = () => {
this.setState({
isEditing: !this.state.isEditing
})
}
handleChange = (date) => {
this.setState({
startDate: date
});
}
handleDescription = (evt) => {
this.setState({
description: evt.target.value
})
}
formatDate = () => {
const d = this.state.startDate;
return d.getFullYear().toString().substring(2) + "-" +
("00" + (d.getMonth() + 1)).slice(-2) + "-" +
("00" + d.getDate()).slice(-2) + ", " +
("00" + d.getHours()).slice(-2) + ":" +
("00" + d.getMinutes()).slice(-2)
}
onSave = () => {
const { description } = this.state;
this.props.update(this.props.index, { description, date: this.formatDate() });
this.setState({
isEditing: false
})
}
componentDidMount = () => {
const { todo } = this.props;
this.setState({
description: todo.description,
startDate: new Date(todo.date)
})
}
render() {
return (
<div>
{this.state.isEditing
? (<EditForm
handleChange={this.handleChange}
description={this.state.description}
startDate={this.state.startDate}
handleDescription={this.handleDescription}
onSave={this.onSave}
/>)
: (
<li>
<div>
{this.props.todo.date}
</div>
<div>
{this.props.todo.description}
</div>
<button onClick={() => this.setEditing()}>Edit</button>
</li>
)
}
</div>
)
}
}
编辑表格
class EditForm extends Component {
render() {
return (
<div>
<DatePicker
selected={this.props.startDate}
onChange={this.props.handleChange}
showTimeSelect
timeFormat="HH:mm"
value={this.props.startDate}
dateFormat="yy-MM-dd, hh:mm"
timeCaption="time"
/>
<textarea onChange={(e) => this.props.handleDescription(e)} value={this.props.description}></textarea>
<button onClick={this.props.onSave} type="submit">Save</button>
</div>
)
}
}