Question

所以问题是我无法为我创建的按钮提供唯一的id。我提供id的当前代码是每次调用组件时递增count变量，然后将其分配给按钮，但所有按钮的id始终以目前的数量。我将使用id作为基础来删除数组中的特定元素。任何其他方法将不胜感激。

这是创建按钮的组件：

class TodoListItem extends React.Component {
  constructor(props) {
    super(props);
    this.onDelete = this.onDelete.bind(this);
    this.arrTodos = this.props.todos;
  }
  onDelete(e) {
    let btnDel = ReactDOM.findDOMNode(this.refs.btnDel);
  }
  render() {
    return (
      <div>
        <li>
          {this.props.desc}
          <span>    </span>
          <input ref="btnDel" type='submit' id={this.props.btnID} value='Delete' onClick={this.onDelete} />
        </li>
      </div>
    );
  }
}

这是主要课程：

class Todolist extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      todos: [],
      btnID: -1
    };
    this.onSubmit = this.onSubmit.bind(this);
    this.createTodo = this.createTodo.bind(this);
    this.todos = {};
    this.todoID = 0;
  }
  onSubmit(e) {
    let value = this.refs.myInput.value;
    let myInput = ReactDOM.findDOMNode(this.refs.myInput);
    if (value == "") {
      myInput.focus();
      return;
    } else {
      let newTodo = {
        idTodo: this.todoID,
        desc: value,
        done: false
      };
      this.todos = newTodo;
      this.setState({
        todos:[...this.state.todos,newTodo],
        btnID: this.state.btnID + 1
      });
      myInput.value = "";
      myInput.focus();
      this.todoID++;
    }
  }
  onInput(e) {
    this.setState({text: e.target.value});
  }
  createTodo(todo) {
    return <TodoListItem key={todo.idTodo} todos={this.state.todos} desc={todo.desc} btnID={this.state.btnID} />
  }
  render() {
    return(
      <div>
        <input ref="myInput" placeholder="What To Do?" />
        <input type="submit" onClick = {this.onSubmit} />
        <ul>{this.state.todos.map(this.createTodo)} </ul>
      </div>
    );
  }
};

Answer 1

不确定你需要什么id，但当你执行map时也只是传递迭代器，所以你会有类似的东西

this.state.todos.map(function(todo, i){
  this.createTodo(todo, i);
}.bind(this));

然后在createTodo内，您可以i作为key和id使用100000 010000 001000 000100 000010 000001 100000。

Answer 2

我不想传递todo的ID，而是试图将一个删除方法作为道具传递，并且todo已经绑定到位。

removeTodo: function(target) {
  const { todos } = this.state;

  this.setState({
    todos: todos.filter(todo => todo !== target)
  });
}

然后，您可以部分应用函数的一个版本来传递给组件。

createTodo(todo) {
  const remove = this.removeTodo.bind(this, todo);

  return <TodoListItem key={todo.idTodo} todos={this.state.todos} desc={todo.desc} remove={remove} />
}

然后在组件内部，只需要删除它就可以调用remove函数。

<input type='submit' value='Delete' onClick={this.props.remove} />

如何为每个创建按钮的组件提供不同的id

2 个答案: