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

Question

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

感谢

代码

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>

Answer 1

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

...
constructor(props) {
super(props);
this.state = { isDisabled: true }
}
...

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

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

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

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

注意：我不确定您是否希望在默认情况下禁用或启用该表单。因此，我禁用了它。此外，我简化了代码以保持示例的简洁性。