如何在反应5毫秒后隐藏输入文本？

Question

有人能帮我的切换功能，我有一个输入字段的分泌物，来自API，现在点击眼睛按钮在输入字段，需要显示5ms和id应该自动设置为‘*’后定时器。

 const HideID = "****************"; 

   togglePassword = () => {
const currentSecretID = this.state.secretID
  ? this.state.secretID
  : "********";
setTimeout(() => {
  this.setState({
    secretID: currentSecretID,
    showID: !this.state.showID,
  });
}, 10);
setTimeout(() => {
  this.setState({
    secretID: HideID,
  });
}, 100);
//clearInterval(50)

}；

Input field looks like
         <Input placeholder={HideID} 
   value={showID ? secretID :  HideID}/>
             <InputGroupAddon
                     class="fa fa-fw fa-eye field_icon togglepassword"
                      addonType="append"
                    >
                      <InputGroupText>
                        <i
                          class="far fa-eye"
                          onClick={this.togglePassword}
                        ></i>
                      </InputGroupText>
                    </InputGroupAddon>
                  


  where am I doing wrong inside the function? 

Answer 1

...needs将以5毫秒.

这里有几个问题：

1. 人眼一般不能处理这么短的事情。据我所知，一个真正的，真正的拨号提醒的人可能能够处理30毫秒，但对一般人来说，100毫秒是下限。即使这段时间太短，也无法读取任何内容。
2. 如果只有5ms已经通过，您就不知道React已经重新呈现了组件(更新了DOM)。即使
3. 已经更新了DOM，您甚至也不知道浏览器是否渲染了页面，因为绘制页面通常每隔16.7ms (每秒60次)。

要处理这个问题，如果您真的想这样做，请使用更长的延迟，并将其挂钩到更新和呈现中；请参见注释：

// Handling the click, we just set the information to display
onEyeClick() {
    this.setState({
        secretID: currentSecretID,
        showID: !this.state.showID,
    });
}

// Watch for component updates
componentDidUpdate() {
    if (this.state.showID && !this.waitingToHideID) {
        // The component updated to start showing the ID; wait to hide it and remember we're doing that
        this.waitingToHideID = true;
        requestAnimationFrame(() => {
            // The browser is *about* to update the display; wait 100ms after this
            // so the human can see it
            setTimeout(() => {
                // It's been 100ms, hide it again
                this.setState({
                    secretID: HideID, // *** Why? What makes state less secure thatn `currentSecretID`?
                    showID: false,
                });
                this.waitingToHideID = false;
            }, 100);
        });
    }
}

活生生的例子：

​

let currentSecretID = "the secret";
const HideID = "*************";
class Example extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            secretID: HideID,
            showID: false,
        };
        this.onEyeClick = this.onEyeClick.bind(this);
    }

    // Handling the click, we just set the information to display
    onEyeClick() {
        this.setState({
            secretID: currentSecretID,
            showID: !this.state.showID,
        });
    }

    // Watch for component updates
    componentDidUpdate() {
        if (this.state.showID && !this.waitingToHideID) {
            // The component updated to start showing the ID; wait to hide it and remember we're doing that
            this.waitingToHideID = true;
            requestAnimationFrame(() => {
                // The browser is *about* to update the display; wait 100ms after this
                // so the human can see it
                setTimeout(() => {
                    // It's been 100ms, hide it again
                    this.setState({
                        secretID: HideID, // *** Why? What makes state less secure thatn `currentSecretID`?
                        showID: false,
                    });
                    this.waitingToHideID = false;
                }, 100);
            });
        }
    }

    render() {
        const {secretID, showID} = this.state;
        return (
            <div>
                ID: {secretID}
                <div>
                    <input type="button" value="Eye" onClick={this.onEyeClick} disabled={showID} />
                </div>
            </div>
        );
    }
}

ReactDOM.render(<Example />, document.getElementById("root"));

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>

​

Answer 2

正如其他答案所建议的，React通常需要一些时间来重新呈现和更新DOM中的数据。我建议不要只为5 milisecond设置超时。

您可以像下面这样更改togglePassword函数，以切换输入以显示1000毫秒后的secreId：

我假设您正在存储由api以secredId状态返回的已保存的id，因此只需切换showId状态即可。

const togglePassword = () => {
  this.setState({
    showID: !this.state.showID,
  }, () => {
     setTimeout(() => {
       this.setState({
         showID: !this.state.showID,
       });
     }, 1000);
   });
};