从dom中隐藏输入值属性

Posted 2023-02-19

【中文标题】从dom中隐藏输入值属性

【英文标题】：Hide input value attribute from the dom

【发布时间】：2019-01-04 20:40:53

【问题描述】：

由于某种原因，当 react 更新输入值时，该值会显示在 DOM 中。 目前我正在使用此代码：

< input type="password" id="password" value="anytext" />

出于安全原因，有什么方法可以隐藏 value 属性中的文本？也许是这样的：

< input type="password" id="password" value />

感谢大家的意见。

【问题讨论】：

这不应该发生。能否显示更新的相关代码？

请发布您的代码。

codesandbox.io/s/wonderful-snyder-3o2dd?file=/src/App.js 这是代码

【参考方案1】：

在我看来这种行为不会发生：

class Demo extends React.Component 
    constructor(props) 
        super(props);
        this.state =  password: 'test', test: '' 
        setInterval(function() 
            document.getElementById('test').innerText = 'ATTRIBUTE: ' + document.getElementById('password').getAttribute('value');
        .bind(this), 200);
    
    render() 
        return <div><input id="password" type="password" value=this.state.password onChange=(e) => this.setState(password: e.target.value) /><pre id="test">ATTRIBUTE: this.state.test</pre><pre id="value">VALUE: this.state.password</pre></div>
    


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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"/>

【讨论】：

只有在有人开始在输入字段中输入时才会显示

如我的示例所示，该属性保持为空，即使在键入时也是如此。

@dave codesandbox.io/s/wonderful-snyder-3o2dd?file=/src/App.js 看看这个，react 在这里显示值

啊，我明白了，那是因为您使用的是“纯”组件，所以它会在每次状态更改时重新渲染整个输入。你可以这样做：codesandbox.io/s/broken-frost-swkp3?file=/App.js，它的工作原理是一样的，但你看不到 DOM 中的值