我有这个组件:
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>
);
}
}
我想在输入值为空时禁用按钮。但是上面的代码不起作用。它说:
添加项目.component.js:78未捕获类型错误:无法读取未定义的属性“value
指向disabled={!this.input.value}
。我在这里做错了什么?我猜可能是在执行render
方法时尚未创建ref。如果是,那么解决方法是什么?
8条答案
按热度按时间wmvff8tz1#
使用
refs
不是最佳实践,因为它直接读取DOM,最好使用React的state
。此外,按钮不会改变,因为组件不会重新呈现,并保持其初始状态。您可以将
setState
与onChange
事件侦听器一起使用,以便在每次输入字段更改时再次呈现组件:下面是一个工作示例:
x一个一个一个一个x一个一个二个x
nhaq1z212#
在HTML中,
所有这些都归结为
disabled="true"
,这是因为它返回非空字符串true
,因此,为了返回false
,在条件语句中传递一个空字符串,如this.input.value ? "true" : ""
。mdfafbf13#
下面是一个使用react钩子的函数组件变体。
我提供的示例代码应该足够通用,可以针对特定用例进行修改,或者适合搜索“How to disable a button in React”的用户。
tp5buhyn4#
在React.
中控制组件渲染的典型方法有几种
但是,我在这里没有使用任何一个,我只是使用ref来命名组件的底层子组件。
gv8xihay5#
你不应该通过引用来设置输入的值。
Take a look at the documentation for controlled form components here - https://facebook.github.io/react/docs/forms.html#controlled-components
简而言之
然后,您将能够使用
disabled={!this.state.value}
控制禁用状态nfeuvbwi6#
一个非常简单的解决方案是使用
useRef
钩子同样,您可以使用
buttonRef.current.disabled = false
启用该按钮uemypmqf7#
在调用
ref
回调之前,this.input
未定义。请尝试在构造函数中将this.input
设置为某个初始值。来自the React docs on refs,强调我的:
回调将在装入或卸载组件后立即执行
ltqd579y8#
我也遇到过类似的问题,结果我们不需要钩子来做这些,我们可以做一个有条件的渲染,它仍然会工作得很好。