大佬教程收集整理的这篇文章主要介绍了如何在React.js中禁用按钮,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
使用refs
不是最佳实践,因为它直接读取DOM,最好使用React的state
。另外,您的按钮不会更改,因为该组件不会重新渲染并保持其初始状态。
每次输入字段更改时,您都可以将其setState
与onChange
事件侦听器一起使用以再次呈现组件:
// input fIEld @R_403_6818@ens to change, updates React's state and re-renders the component.
<input onChange={e => this.setState({ value: e.target.value })} value={this.state.value} />
// button is Disabled when input state is empty.
<button Disabled={!this.state.value} />
这是一个工作示例:
class AddItem extends React.Component {
constructor() {
super();
this.state = { value: '' };
this.onChange = this.onChange.bind(this);
this.add = this.add.bind(this);
}
add() {
this.props.onbuttonClick(this.state.value);
this.setState({ value: '' });
}
onChange(e) {
this.setState({ value: e.target.value });
}
render() {
return (
<div classname="add-item">
<input
type="text"
classname="add-item__input"
value={this.state.value}
onChange={this.onChange}
placeholder={this.props.placeholder}
/>
<button
Disabled={!this.state.value}
classname="add-item__button"
onClick={this.add}
>
Add
</button>
</div>
);
}
}
ReactDOM.render(
<AddItem placeholder="Value" onbuttonClick={v => console.log(v)} />,
document.getElementByID('VIEw')
);
<script src="https://cdnjs.cloudflare.com/AJAX/libs/react/15.1.0/react.min.Js"></script>
<script src="https://cdnjs.cloudflare.com/AJAX/libs/react/15.1.0/react-dom.min.Js"></script>
<div ID='VIEw'></div>
我有这个组成部分:
import React from 'react';
export default class AddItem extends React.Component {
add() {
this.props.onButtonClick(this.input.value);
this.input.value = '';
}
render() {
return (
<div className="add-item">
<input type="text" className="add-item__input" ref={(input) => this.input = input} placeholder={this.props.placeholder} />
<button disabled={!this.input.value} className="add-item__button" onClick={this.add.bind(this)}>Add</button>
</div>
);
}
}
我希望在输入值为空时禁用按钮。但是上面的代码不起作用。它说:
指向disabled={!this.input.value}
。我在这里怎么做错了?我猜测render
执行方法时可能尚未创建ref
。如果是,那么解决方法是什么?
以上是大佬教程为你收集整理的如何在React.js中禁用按钮全部内容,希望文章能够帮你解决如何在React.js中禁用按钮所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。