如何在反应中运行脚本答案

【问题标题】：How to run script in react如何在反应中运行脚本
【发布时间】：2017-01-30 12:04:50
【问题描述】：

嘿，我有一个反应应用程序，我有一个输入字段，我想在输入实际密码时屏蔽（type="password"）。

我找到了一个 javascript 代码，它可以满足我的需要，但我似乎无法让它与 React 一起运行。

屏蔽函数的代码如下：

但我不能在我的视图组件中使用它。

我确实尝试过：

module.exports = MaskedPassword;

但无法使用课程？！

我肯定错过了一些重要的东西......

我如何导入它：

import maskedInput from './../../public/MaskedPassword';

这就是我的组件的样子：

export default class DriversLicense extends Component {
constructor(props){
  super(props);
  this.state ={};
}

componentDidMount() {
  maskedInput(document.getElementById("demo-field"), '\u25CF');
}

render() {
  return (
  <div>
    <form id="demo-form" action="#">
      <fieldset>
        <input type="password" className="password" id="demo-field" name="pword" onChange={this.demoChange}/>
      </fieldset>
    </form>
  </div>
  );
}

}

这给了我：

 this.createContextWrapper is not a function

【问题讨论】：

所以，你添加了 module.exports = MaskedPassword;在该文件的末尾，然后您如何导入该类？以及您如何尝试使用它？你能分享剩下的代码吗？
更新了问题
最后一行，你是从'componentDidMount'调用它吗？您必须确保在渲染元素后调用它
是的，我将它添加到 componentDidMount 中，我从“我如何使用它”中删除了“新”，现在我正在进入班级，但无法访问班级原型。 passfield._contextwrapper = this.createContextWrapper(passfield);返回不是函数的

标签： javascript node.js reactjs ecmascript-6

【解决方案1】：

通常这是在渲染后调用外部库对组件进行更改的方式，我建议找到你的库的 react 版本，因为它可能会出现绑定问题（this）。希望这个例子有所帮助。

function maskedInput(ele, symbol, obj) {  
  //this here is not the function
  ele.value = this.someOtherFunction()
  
}

maskedInput.prototype = {
  someOtherFunction: function(){
    return "Hello"
  }
}

function maskedInputGood(ele, symbol, obj) {  
  const someOtherFunction = function(){
    return "Hello"
  }
  ele.value = someOtherFunction()
  
}

maskedInput.prototype = {
  someOtherFunction: function(){
    return "Hello"
  }
}

var App = React.createClass({

componentDidMount() {
  maskedInputGood(document.getElementById("demo-field"), '\u25CF');
  maskedInput(document.getElementById("demo-field"), '\u25CF');
},

render() {
  return (
  <div>
    <form id="demo-form" action="#">
      <fieldset>
        <input type="password" className="password" id="demo-field" name="pword" onChange={this.demoChange}/>
      </fieldset>
    </form>
  </div>
  );
}
})

ReactDOM.render(<App />,document.getElementById('app'))

<html>
  <body>
    
<div id='app'></div>
<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>
    
  </body>
</html>

【讨论】：

我刚刚编辑了答案，问题出在你的图书馆，你必须更新你的图书馆，见例子。

【解决方案2】：

在我看来，该库没有正确封装，或者一些类似的问题。您是否尝试过使用像这样的 React 组件：https://www.npmjs.com/package/react-password-mask

由于它是一个 React 组件，将它集成到您的代码中会更自然。

你的 maskedPassword 库是否有任何 react-password-mask 缺少的功能？

【讨论】：

是的 react-password-mask 在输入 ex: "****4" show new character hide rest... 时不做掩蔽... 等等..