如何在反应中更新禁用字段的状态答案

【问题标题】：How to update state on disabled field in react如何在反应中更新禁用字段的状态
【发布时间】：2020-07-27 20:34:21
【问题描述】：

我正在尝试显示默认值并希望禁用它字段。值显示成功，但未更新状态。有人可以帮我如何更新禁用字段的状态。我真的很努力，但没有找到任何解决方案。

谢谢

代码

 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>

【问题讨论】：

标签： javascript reactjs ecmascript-6 react-redux

【解决方案1】：

您的组件总是被禁用，因为它被硬编码为true。如果您希望它具有动态状态，则需要将键添加到您的类状态。

...

constructor(props) {
    super(props);

    this.state = { isDisabled: true }
}

...

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

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

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

【讨论】：

【解决方案2】：

<input> 元素上的disabled 属性通过传入一个布尔值来工作。一个真值将禁用它，一个假值将启用它。

考虑到这一点，我们可以使用rate_Per_sqft 的否定值来启用输入元素。也许是这样的：

class App extends React.Component {

  state = {
    rate_Per_sqft: null
  }
  
  componentDidMount() {
    // Simulate asynchronous operation
    setTimeout(() => {
      this.setState({ rate_Per_sqft: 550 })
    }, 1500)
  }


  render() {
    const { rate_Per_sqft } = this.state
    
    return(
      <div>
       {!rate_Per_sqft && <span>Calculating charges..</span>}
        <input
          type="text"
          name="rate_Per_sqft"
          value={rate_Per_sqft}
          disabled={!rate_Per_sqft}
          placeholder="Category Charges"
        />
      </div>
    )

  }

}


ReactDOM.render(<App/>, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

注意：我不确定您是否希望默认禁用或启用该表单。所以，我禁用了它。此外，我简化了代码以使示例简短明了。

【讨论】：