Javascript 如何在reactJS组件文件中编写和调用函数

我写了一个登录页面，在输入我需要一个功能来改变输入类型从文本到密码一旦密码区对焦。 当我在html单页中做一些事情时，一切都很好，但我的主管告诉我使用reactJS组件来编写它。 下面是我在Password.js中的操作：

import React from "react";

export default class Password extends React.Component {
  passInput : function (){
    this.setAttribute("value","");
    this.setAttribute("type", "password");
  },
  render() {
    return (
      <div className="Rectangle">
        <img id="pass" className="Group" src="resources/group.png"/>
        <input className="Input" type="text" value="PASSWORD" onfocus={this.passInput}/>
      </div>
    );
  }
}

---

也不起作用，我应该如何修复它们？焦点不属于React事件系统<然而，代码>聚焦是。试试看

此外，您没有正确设置输入值。它应该是

element.value=”“

not

element.setAttribute（“值”、”）


从“React”导入React；
导出默认类密码扩展React.Component{
密码输入：函数（e）{
e、 target.value=“”；
e、 setAttribute（“类型”、“密码”）；
},
render（）{
返回(
);
}
}

我建议：


将输入字段的
类型
和
值
置于组件状态
使用
占位符
指示用户应键入的内容，而不是
值
（见下文）
例如，我添加了一个
onBlur
事件处理程序，它将
类型
更改回
文本
（这不是您在现实生活中想要做的事情）

通常，更改要管理的DOM部分是一个非常糟糕的主意。我强烈建议不要使用refs来更改输入组件的类型

对于您的挑战，一个更具反应性的解决方案是：

class Password extends React.Component {
  constructor(props) {
    super(props);
    this.state = { 
      type: "text"
      placeholder: "text field"
    };
  }
  gotFocus() {
    this.setState({ 
      type: "password",
      placeholder: "password field"
    });
  }
  lostFocus() {
    this.setState({ 
      type: "text",
      placeholder: "text field"
    });
  }
  handleChange(event) {
    this.setState ({ 
      value: event.target.value
    });
  }
  render() {
    return (
        <input 
          type={this.state.type} 
          placeholder={this.state.placeholder}
          value={this.state.value} 
          onFocus={this.gotFocus.bind(this)}
          onBlur={this.lostFocus.bind(this)}
          onChange={this.handleChange.bind(this)}/>
    );
  }
}

类密码扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={
键入：“文本”
占位符：“文本字段”
};
}
gotFocus（）{
这个.setState（{
键入：“密码”，
占位符：“密码字段”
});
}
lostFocus（）{
这个.setState（{
键入：“文本”，
占位符：“文本字段”
});
}
手变（活动）{
this.setState（{
值：event.target.value
});
}
render（）{
返回(
);
}
}

你可以找到一份工作

PS：看起来您的设置正在使用“密码”初始化
value
，一旦组件获得焦点，您就将
value
更改为（空）。

在用户键入密码，然后单击外部，然后重新聚焦的场景中，这将崩溃。在这种情况下，您的组件将删除（！）任何以前键入的密码。

HTML有一个标签
占位符
，它会做得更好。（例如，请参阅codepen）。
尝试使用Thank，但它不会使“e.target.setAttribute（“value”）；“非常感谢，顺便问一下，react-way是一种什么样的代码风格，你能给出一些原则吗？找到原则的最佳途径是仔细阅读react官方文档中的“指南”（guides）和“参考”（reference）。
import React from "react";

export default class Password extends React.Component {
  passInput : function (e){
    e.target.value = "";
    e.target.setAttribute("type", "password");
  },
  render() {
    return (
      <div className="Rectangle">
        <img id="pass" className="Group" src="resources/group.png"/>
        <input className="Input" type="text" value="PASSWORD" onFocus={this.passInput}/>
      </div>
    );
  }
}

class Password extends React.Component {
  constructor(props) {
    super(props);
    this.state = { 
      type: "text"
      placeholder: "text field"
    };
  }
  gotFocus() {
    this.setState({ 
      type: "password",
      placeholder: "password field"
    });
  }
  lostFocus() {
    this.setState({ 
      type: "text",
      placeholder: "text field"
    });
  }
  handleChange(event) {
    this.setState ({ 
      value: event.target.value
    });
  }
  render() {
    return (
        <input 
          type={this.state.type} 
          placeholder={this.state.placeholder}
          value={this.state.value} 
          onFocus={this.gotFocus.bind(this)}
          onBlur={this.lostFocus.bind(this)}
          onChange={this.handleChange.bind(this)}/>
    );
  }
}