Question

随着状态变化，我正在创建的输入会立即全部禁用。如何启用/禁用直接输入？ mb裁判出了点问题...我不知道

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

这是因为您对所有输入字段都使用单一状态，即script_header = """#!/bin/bash PAYLOAD_LINE=\`awk '/^__PAYLOAD_BELOW__/ {print NR + 1; exit 0; }' \$0\` tail -n+\$PAYLOAD_LINE \$0 | tar -xvz""" with open('myscript.sh','wb') as script: script.write(bytes(script_header + '\n', 'utf-8')) for line in open(payload.tar.gz, 'rb'): script.write(line)。因此，状态更新时，所有字段的状态都将更新。您必须对不同的输入使用不同的状态。建议之一是，您可以在edit状态下使用布尔数组，根据输入字段的操作对其进行更新

Answer 2

您可以在构造函数中进行操作

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 3

由于您将所有输入绑定到单个this.state.editTask属性，因此，每当您对其进行修改时，所有输入都会更改，因为所有输入的disabled属性都绑定到{this.editTask}

您可以做的是，您可以在每个任务中定义一个edit属性，就像您为复选框设置complete属性一样。

请参阅我创建的StackBlitz example，以查看它是否有效。

即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>

禁用直接输入

3 个答案: