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

我想获得以下效果：单击按钮->呼叫功能切换->将单击项的索引保存为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>
    )
  }
}

Demo

标签：ecmascript-6,reactjs,javascript
来源： https://codeday.me/bug/20191210/2104355.html