识别反应中的图像存在

问题描述

这是图片url的输入

 <input className="imageInput" placeholder="upload url" onChange={this.onInputChange}/>

onChange 改变输入状态为目标值

onInputChange = (event)=> {
    this.setState({input:event.target.value});
}

并且有一个更新按钮将 imageUrl 更新为输入

<div class="update_button"onClick={this.onUpdate}>Update</div>

onUpdate = () => {
    this.setState({imageUrl:''})
}

现在单击更新按钮将更改带有图像的输入部分。 我使用三元运算符

{this.state.imageUrl ? <!--show image here --> :<!-- shows input--> }

如果单击更新按钮时没有图像，我需要创建一条错误消息。 问题是当 state.imageUrl 为空时，它显示输入部分而不是错误消息。 那么如何知道图像的存在并显示错误信息？

解决方法

也许您希望在条件下显示错误消息：

{this.state.imageUrl === "" ? <p>Error,no image uploaded<p/> : null}

将此语句放在您想要放置错误消息的任何位置，根据需要对其进行自定义。