Question

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

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

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

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

我非常感谢大家的投入。

Answer 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"/>

隐藏来自dom的输入值属性

1 个答案: