我希望创建一个无状态组件,其input
元素可以由父组件验证。
在下面的示例中,我遇到了一个问题,其中输入ref
从未分配给父级的私有_emailAddress
属性。
何时handleSubmit
调用,this._emailAddress
是undefined
。是否有我所缺少的东西,或者有更好的方法来做到这一点?
interface FormTestState {
errors: string;
}
class FormTest extends React.Component<void, FormTestState> {
componentWillMount() {
this.setState({ errors: '' });
}
render(): JSX.Element {
return (
<main role='main' className='about_us'>
<form onSubmit={this._handleSubmit.bind(this)}>
<TextInput
label='email'
inputName='txtInput'
ariaLabel='email'
validation={this.state.errors}
ref={r => this._emailAddress = r}
/>
<button type='submit'>submit</button>
</form>
</main>
);
}
private _emailAddress: HTMLInputElement;
private _handleSubmit(event: Event): void {
event.preventDefault();
// this._emailAddress is undefined
if (!Validators.isEmail(this._emailAddress.value)) {
this.setState({ errors: 'Please enter an email address.' });
} else {
this.setState({ errors: 'All Good.' });
}
}
}
const TextInput = ({ label, inputName, ariaLabel, validation, ref }: { label: string; inputName: string; ariaLabel: string; validation?: string; ref: (ref: HTMLInputElement) => void }) => (
<div>
<label htmlFor='txt_register_first_name'>
{ label }
</label>
<input type='text' id={inputName} name={inputName} className='input ' aria-label={ariaLabel} ref={ref} />
<div className='input_validation'>
<span>{validation}</span>
</div>
</div>
);
编辑:您现在可以使用React Hooks。 请参阅Ante Gulin的答案。
您无法访问做出反应等的方法(例如componentDidMount
,componentWillReceiveProps
在无状态组件等)在内refs
。查看有关GH的完整讨论。
无状态的想法是没有为其创建一个实例(状态)。因此,您无法附加ref
,因为没有将引用附加到的状态。
最好的选择是在组件发生更改时传递回调,然后将该文本分配给父对象的状态。
或者,您可以完全放弃无状态组件,而使用普通的类组件。
从文档…
您不能在功能组件上使用ref属性,因为它们没有实例。但是,您可以在功能组件的render函数内使用ref属性。
function CustomTextInput(props) {
// textInput must be declared here so the ref callback can refer to it
let textInput = null;
function handleClick() {
textInput.focus();
}
return (
<div>
<input
type="text"
ref={(input) => { textInput = input; }} />
<input
type="button"
value="Focus the text input"
onClick={handleClick}
/>
</div>
);
}
问题内容: 这是一个js小提琴, 显示了实际的问题。 在组件的render函数中,我使用class渲染div 。在相同组件的功能中,我期望能够选择类并像这样附加到它(因为组件已经安装) 但是,附加内容不会显示。我还尝试(也显示在小提琴中)以相同的方式进行添加,但从父组件到子组件的追加结果相同,并且也从子组件到父组件的空间进行追加结果。我尝试后者的逻辑是,可以更确定dom元素已被渲染。 同时,我能够
我在将状态从孩子发送到家长方面遇到了问题。点击主组件中的菜单后,我想改变状态active并将此active发送到侧边栏组件,因为我想隐藏/显示侧边栏取决于CSS中的active类。在Vanilla JS中很容易,但在React中我有点困惑。 主: 菜单: 侧栏: 应用程序JS
我用React构建了3个组件。他们是: 包装器 列表 列表项 如何管理单击的复选框的状态。我想Wrapper知道哪些复选框被选中。
本文向大家介绍描述下在react中无状态组件和有状态组件的区别是什么?相关面试题,主要包含被问及描述下在react中无状态组件和有状态组件的区别是什么?时的应答技巧和注意事项,需要的朋友参考一下 1,无状态组件主要用来定义模板,接收来自父组件props传递过来的数据,使用{props.xxx}的表达式把props塞到模板里面。无状态组件应该保持模板的纯粹性,以便于组件复用。创建无状态组件如下: v
我的Navbar组件有2个子组件。每个组件都有自己的状态。在其组成部分内工作正常的国家。如何更新这两个状态从假到真的同时,当两个功能onclick将被执行? 主组件导航栏 列表菜单组件 汉堡包成分
问题内容: 我正在尝试仅更新数组状态中的一个元素,但不确定如何执行此操作。 State 设定状态 如果我想更改标记的第四个元素中的键,该怎么做? 谢谢 问题答案: 重要的一点是,我们不应该直接更改状态数组,而要始终在新数组中进行更改,然后使用setState更新状态值。 如 Doc 建议: 切勿直接更改this.state,将this.state视为不可变。 更新状态数组的基本流程是: 1- 首先