时间戳

首页 > 解决方案 > 如何在按钮 onClick 方法上动态设置 TextField 上的 ErrorMessage

reactjs - 如何在按钮 onClick 方法上动态设置 TextField 上的 ErrorMessage

问题描述

只有当用户按下按钮时，我才需要将 ErrorMessage 绑定到文本字段。在这有很好的例子如何使用errormessage但问题是我不知道如何在用户点击后附加errorMeesage

 <TextField id='titleField' value={titleValue} required={true} label={escape(this.props.description)} onGetErrorMessage={this._getErrorMessage} validateOnLoad={false} />

这是一个按钮的调用：

private _buttonOnClickHandler() {
    let textvalue = document.getElementById('titleField')["value"];

    if(textvalue === "")
    {
        //call onGetErrorMessage or something that will set ErrorMeesage and input will be red
    }

    return false;
}

谢谢

标签： reactjsspfxoffice-fabric

解决方案

我能想到的最简单的方法是通过onGetErrorMessage状态检查来预测是否已单击按钮。

<TextField
    id='titleField'
    value={titleValue}
    required={true}
    label={escape(this.props.description)}
    // Only allow showing error message, after determining that user has clicked the button
    onGetErrorMessage={this.state.buttonHasBeenClicked ? this._getErrorMessage : undefined}
    validateOnLoad={false}
/>

然后在您的按钮单击处理程序中，只需设置该状态值：

private _buttonOnClickHandler() {
    this.setState({ buttonHasBeenClicked: true });

    return false;
}

只要你实例化为buttonHasBeenClickedfalse，那么这个方法将满足以下要求：（a）用户点击按钮前，不显示错误信息TextField，（b）用户点击按钮后，错误信息开始出现被显示。您保留_getErrorMessage(value)根据TextField.

推荐阅读