输入验证 ReactJS

Question

我想尝试验证我的输入。在 ReactJS 组件（不是容器）上

<form id="aform" onSubmit={this.props.submit} className={classes}>
	<label> Name: 
		<input name="name" type="text" onChange={this.props.changed} value={this.props.value} defaultValue={this.props.slug}/>
	</label>
  <label>
		Description:
		<input typ="text" name="description" onChange={this.props.changed} value={this.props.value} defaultValue={this.props.description}/>
	</label>
	<input type="submit" value="Submit" onClick={this.cancelCourse}/>
</form>

在上面的代码 sn-p 中，我正在制作一个带有提交的表单。我想根据名称输入的长度禁用提交按钮。我找不到引用在组件内的好方法。因此，目标是仅在组件内进行验证，使用引用输入名称的 if else 语句。

Answer 1

您可以使用disabled 属性：

<input type="submit" value="Submit" disabled={this.props.value.length < 10} onClick={this.cancelCourse}  />