Javascript 如何更新react中已禁用字段的状态

我正在尝试显示默认值，并希望禁用该字段。值已成功显示，但未更新其状态。有人能帮我更新禁用字段的状态吗。我真的很努力，但没有找到任何解决办法

谢谢

代码

 componentWillReceiveProps(nextProps) {
    const { projectData } = nextProps;
    this.setState({
      project: projectData,
    });
  }

  componentDidMount() {
    const { stan_rate_Per_sqft, category_charges, project } = this.state;

    console.log("@@@@@ data", stan_rate_Per_sqft, category_charges);
    if (
      project &&
      project.category_charges_apply &&
      project.category_charges_apply === "yes"
    ) {
      this.setState({
        rate_Per_sqft: stan_rate_Per_sqft * parseInt(1 + category_charges),
      });
    }
  }

在渲染方法中

 <td>
       <input
        type="text"
        className="inputStyle"
        name="rate_Per_sqft"
        value={rate_Per_sqft}
        disabled={true}
       placeholder="Category Charges"
    />
 </td>

---

您的组件始终处于禁用状态，因为它已硬编码为

true

。如果希望它具有动态状态，则需要向类状态添加键

...

constructor(props) {
    super(props);

    this.state = { isDisabled: true }
}

...

现在，在您的输入字段中，您可以使用此状态

<input ... disabled={this.state.isDisabled} />

当isDisabled设置为false（使用setState）时，该字段将再次启用，反之亦然。

元素上的属性通过传递布尔值来工作。真实值将禁用它，虚假值将启用它

考虑到这一点，我们可以使用

rate\u Per_sqft

的反数值来启用输入元素。也许是这样的：

类应用程序扩展了React.Component{
状态={
每平方英尺单价：空
}
componentDidMount（）{
//模拟异步操作
设置超时（（）=>{
this.setState（{rate_Per_sqft:550}）
}, 1500)
}
render（）{
const{rate_Per_sqft}=this.state
返回(
{！每平方英尺单价和计算费用..}
)
}
}
ReactDOM.render（，document.getElementById（'root'））