неотключаемый прямой ввод

Question

Входы, которые я создаю, отключаются сразу после изменения состояния.Как включить / отключить прямой ввод?Мб что-то не так с ссылками ... Я не знаю

class TaskRow extends Component {
  constructor(props) {
    super(props);
    this.myRef = createRef();
    this.state = {
      edit: true,
    };
  }

  editTask = () => {
    this.setState({ edit: false })
  };

  render() {
    const { edit } = this.state;
    return (
    <div>
      <ul className="taskList">
        <div className="tasksContainer">
          {tasks.map(task => (
            <div className="taskDiv" key={task.id}>
              <input type="checkbox" checked={task.completed}/>
              <input
                ref={this.myRef}
                type="text"
                content={task.text}
                disabled={edit}
              />
              <button onClick={this.editTask}>Редактировать</button>
            </div>
          ))}
        </div>
      </ul>
    </div>
    )
  }
}

Answer 1

Что вы можете сделать, это в конструкторе,

const inputState = {};
tasks.forEach((task) => inputState[`input_${task.id}] = true)
this.state = {
  ...inputStates
}

Затем в JSX

disabled={this.state[`input_${task.id}`]}

<button onClick={() => this.editTask(`input_${task.id})}>Редактировать</button>

Затем в функции

editTask = (inputState) => {
  this.setState({ [inputState]: false })
};

Я просто даю вамидея, поддерживать отдельные состояния для каждого, выделить их.Ищите орфографические ошибки, если таковые имеются

Answer 2

Поскольку вы привязываете все входные данные к одному свойству this.state.editTask, при каждом его изменении все входные данные будут меняться, поскольку все входные атрибуты имеют свои атрибуты disabled, связанные с {this.editTask}.

* 1005.* Что вы можете сделать, так это то, что вы можете определить свойство edit в каждой задаче так же, как вы используете свойство complete для флажков.

См. Пример StackBlitz Iсоздан, чтобы увидеть, как он работает.

Т.е. tasks будет:

[{
    id: 1,
    completed: true,
    edit: true
  }, {
    id: 2,
    completed: false,
    edit: false
  }, {
    id: 3,
    completed: true,
    edit: true
  }, {
    id: 4,
    completed: false,
    edit: true
  }, {
    id: 5,
    completed: true,
    edit: false
  }
]

И тогда вы можете связать HTML следующим образом:

<ul className="taskList">
        <div className="tasksContainer">
          {this.state.tasks.map(task => (
            <div className="taskDiv" key={task.id}>
              <input type="checkbox" checked={task.completed}/>
              <input className='taskInput'
                type="text"
                content={task.text}
                disabled={task.edit !== true}
              />
              <button onClick={() => { this.editTask(task) }}>Редактировать</button>
            </div>
          ))}
        </div>
      </ul>

Answer 3

Это потому, что вы используете одно состояние, т.е. edit для всех полей ввода.Таким образом, когда состояние обновляется, оно обновляется для всех полей.Вы должны использовать разные состояния для разных входных данных.Одним из предложений может быть следующее: Вы можете использовать массив логических значений в состоянии edit и обновлять его в соответствии с полями ввода действий