Question

我想获得以下效果：单击按钮->调用功能切换->将被单击项的索引保存为this.state.index->显示编辑表单--->获取被单击数据元素的形式->编辑数据->保存

当尝试调用切换功能并在状态下写入index时，索引不会保存。将索引保存为状态后，我想使用它并可以访问todo = this.state.todos [this.props.index]中的clicked元素。我在form属性中发送了单击的todo的数据。在表单中，他通过value = this.props.todo.date进行了引用。我正在使用date-picker-react库。有人可以指导我吗？

应用

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;

待办事项/ Todo

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;

Answer 1

让每个待办事项管理其状态，在编辑时将显示该待办事项的表单。

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>
    )
  }
}

Demo

如何从状态获取数据并编辑表单中的元素？

1 个答案: