Question

我打算在许多示例中不使用ref来创建待办事项列表，但是它不起作用。

预期的行为是，输入条目时，它将显示在顶部，单击添加时，它将创建一个用于输入条目的输入框。当前，进入状态后返回未定义。

代码可以在下面或此sandbox中找到：

Docstring:     
Objects of this class realize the transformation between word-document co-occurrence matrix (int)
into a locally/globally weighted TF_IDF matrix (positive floats).

这是todo.js：

import React, { Component } from 'react';
import { render } from 'react-dom';
import './style.css';
import ToDo from './todo'
class App extends Component {
  constructor() {
    super();
    this.state = {
      todos: []
    };
  }

  onChange=(e)=>{
    const newToDos = [...this.state.todos]
    newToDos.push(e.target.value)
    this.setState({
      todos: newToDos
    })
  }

    onAdd=(e)=>{
      e.preventDefault();
      const newtodos=[...this.state.todos]
      this.setState({
        todos: newtodos.push("")
      })
  }

  render() {
    console.log(this.state.todos)
    return (
      <div>
        <p>All the to-dos include {this.state.todos}</p>
        <ToDo 
          todos={this.state.todos}
        />
        <form onSubmit={this.onChange}>
          <input 
            type="text" 
            placeholder="add a new todo..."
          />
        </form>   
        <button onClick={this.onAdd}>+</button>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

Answer 1

您的代码newtodos.push（“”）不会返回数组，因此没有地图功能：

    this.setState({
    todos: newtodos.push("")
  })

将其改正为此类

    this.setState({
        todos: newtodos.concat("new value")
      })

Answer 2

您可以在onChange输入时将新的待办事项存储在状态中，并在单击保存时将其添加到待办事项中。

我已分叉并编辑您的样本。 https://stackblitz.com/edit/react-nwtp5g?file=index.js

顺便说一句：在您的示例中，newtodos.push("")将返回newtodos数组的长度，而不是推入后的数组的长度。

onAdd=(e)=>{
  e.preventDefault();
  const newtodos=[...this.state.todos]
  this.setState({
    todos: newtodos.push("")
})

希望获得帮助。

Answer 3

您可以使用

更新代码

import React, { Component } from 'react';
import { render } from 'react-dom';
import './style.css';
import ToDo from './todo'
class App extends Component {
  constructor() {
    super();
    this.state = {
      todos: [],
      inputText: ""
    };
  }


    onAdd= () => {
      this.setState({
        todos: [...this.state.todos, this.state.inputText], textInput: ""
      })
  }

  render() {
    console.log(this.state.todos)
    return (
      <div>
        <p>All the to-dos include {this.state.todos}</p>
        <ToDo 
          todos={this.state.todos}
        />
        <form>
          <input 
            type="text" 
            placeholder="add a new todo..."
            onChange={inputText => this.setState({inputText})} 
          />
        </form>   
        <button onClick={this.onAdd}>+</button>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

在todo.js中，您只需完成

import React, { Component } from 'react';
import { render } from 'react-dom';

export default const ToDo = ({todos}) => {
  return(<div>
    {todos.map((todo, index) => (
      <div key={index}>
        {todo}
      </div>))}
    </div>)}

，因为它不包含任何与之关联的state。

Answer 4

您对此代码有疑问，

<form onSubmit={this.onChange}>
   <input 
       type="text" 
       placeholder="add a new todo..."
   />
</form>

这里您要在表单上添加onSubmit，因为您没有submit按钮，该表单永远不会调用。

您应该这样做，

<form>
 <input 
     type="text" 
     placeholder="add a new todo..."
     onChange={this.onChange}
     value={this.state.currentValue}
 />
</form>

onChange=(e)=>{
  event.preventDefault();
  this.setState({
      currentValue: e.target.value
  })
}

onAdd=(e)=>{
      e.preventDefault();
      const newToDos = [...this.state.todos]
      newToDos.push(this.state.currentValue)
      this.setState({
         todos: newToDos,
         currentValue: ''
    })
}

Demo

更新

在您的todo组件中，没有有用的构造函数，如果您在组件中没有状态或没有任何绑定功能，this则不添加构造函数。

您可以删除构造函数。

另一件事是，您没有向onChange组件传递任何todo道具，因此在这里您将获得undefined的{{1}}。

onChange

您也可以将此组件编写为功能组件。

如何在没有参考的React中创建待办事项列表

4 个答案: