在react代码中双击

Double post in react code

本文关键字：双击代码 react 更新时间：2023-09-26

我正在尝试在react中制作一个todo应用程序。但它一直在重复发布。我做了一个编辑功能，之后它会不断地重复发布。我以导游为榜样。但是我找不到错误。

   <!DOCTYPE html>
  <html>
  <head>
    <title>EASY SHIT</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="../../build/react.js"></script>
    <script src="../../build/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
    <style>
      body{
        margin-top:30px;
      }
      a.delete{
          color: red;
      }
      </style>
</head>
  <body>
    <div class="container">
  <div class="row">
      <div class="col-md-12">
    <div id="app"></div>
</div>
</div>
  </div>

    <script type="text/babel">
      var App = React.createClass({
        getInitialState: function (){
          return{
            text: '',
            isEdit: 0,
            todos:[
              {
                id: 1,
                text: 'meeting at work'
              },
              {
                id: 2,
                text: 'Walk the dog'
              },
              {
                id: 3,
                text: 'Eat candy'
              }
            ]
          }
        },
          render: function(){
            return(
              <div>
              <TodoForm
              {...this.state}
              changeText={this.handleChangeText}
              onTodoUpdate={this.handleTodoUpdate}
              onTodoAdd={this.handleTodoAdd} />
              <TodoList
              {...this.state}
              editTodo={this.handleTodoEdit}
              deleteTodo={this.handleTodoDelete}/>
              </div>
            )
          },
          handleTodoAdd: function(text){
            var newTodo = {
              id: this.state.todos.length + 1,
              text: text
            }
            this.setState({todos: this.state.todos.concat(newTodo)});
          },
          handleTodoDelete: function(todo){
            var todos = this.state.todos;
            for(var i = 0;i <todos.length; i++) {
              if(todos[i].id == todo.id){
                todos.splice(i, 1);
              }
            }
            this.setState({todos: todos});
          },

          handleTodoEdit: function(todo){
            this.setState({
              text: todo.text,
              isEdit: todo.id
            });
          },
          handleChangeText: function(text){
            this.setState({text: text});
          },
          handleTodoUpdate: function(todo){
            var todos = this.state.todos;
            for(var i = 0;i <todos.length; i++) {
              if(todos[i].id == todo.id){
                todos.splice(i, 1);
              }
            }
            todos.push(todo);
            this.setState({todos: todos});
          }
      });
      var TodoForm = React.createClass({
          render: function(){
            return(
              <div>
            <form onSubmit={this.onSubmit}>
              <div className="form-group">
                <label>Todo text</label>
                <input type="text" ref="text" value={this.props.text} onChange={this.onChange} className="form-control" />
              </div>
            </form>
              </div>
            )
          },
          onChange: function(e){
            this.props.changeText(e.target.value);
          },
          onSubmit: function(e){
            e.preventDefault();
            var text = this.refs.text.value.trim();
            if(!text){
              alert('Please enter something');
              return;
            }
            if(this.props.isEdit){
              var updatedTodo = {
                id:this.props.isEdit,
                text: text
              }
              this.props.onTodoUpdate(updatedTodo);
            } else {
              this.props.onTodoAdd(text);
            }
            this.props.onTodoAdd(text);
            this.refs.text.value= '';
          }
      });

      var TodoList = React.createClass({
          render: function(){
            return(
              <ul className="list-group">
            {
              this.props.todos.map(todo => {
                return <li className="list-group-item" todo={todo} key ={todo.id}>
                <span onClick={this.editTodo.bind(this, todo)}> {todo.text}</span> <a onClick={this.OnDelete.bind(this, todo)}className="delete" href="#">x</a></li>
              })
            }
              </ul>
            )
          },
          OnDelete: function(todo){
            this.props.deleteTodo(todo);
          },
          editTodo: function(todo){
            this.props.editTodo(todo);
          }
      });
      ReactDOM.render(
        <App />,
        document.getElementById('app')
      );
    </script>
  </body>
</html>

在我看来，您似乎没有跟踪您是在编辑现有项目还是在添加新项目。

如果你正在编辑，那么你需要跟踪哪一个，然后在你的状态下替换或更新它，否则追加到列表中。你只是在添加，所以你的应用程序总是认为正在添加一个新项目，因此它看起来像是双重发布，但实际上它添加了一个全新的项目，恰好有更新的文本。

另一种选择是调用delete，然后再调用edit，这将具有相同的效果。