Question

我遇到一个小形式（AddPersonFormComponent）在按钮点击时添加到主要组件的情况，可能有多个人。

我已实现此功能，但在PersonForm提交时我需要禁用PersonForm的输入。目前我通过手动禁用所有输入来执行此操作：

function disableInputs() {
    document.getElementById('personName').disabled = true;
    document.getElementById('personAdress').disabled = true;
    document.getElementById('personPhone').disabled = true;
    document.getElementById('personEmail').disabled = true;
    document.getElementById('personJob').disabled = true;
}

这个问题是，当我在页面中有多个人时，它会仅为第一个表单而不是其他表单禁用输入。有没有更好的方法来做到这一点，所以不会发生这个错误？

Answer 1

你应该遵循这种模式

const InputComponent = ({ isDisabled }) => {
  return <input disabled={isDisabled} />;
};
class FormComponent extends React.Component {
  render() {
    return <InputComponent isDisabled={this.props.isDisabled} />;
  }
}

Answer 2

这是因为你正在使用ID＆＃39;。根据定义，id是unique identifier，它应该只在DOM中使用一次。

所以getElementById将始终只返回给定id的第一个元素。如果你想操纵所有副本，你应该使用类。

^这是为什么只有第一种形式被禁用的澄清

但是当你使用反应时，你可以更好地按照Ricky的回答中提到的方式做事，你可以将布尔变量传递给所有输入并将布尔值设置为false将禁用所有输入

动态禁用具有多个实例的react组件中的输入

2 个答案: