Question

我正在写一个登录页面，在输入中我需要一个函数，一旦密码区域onfocus，就将输入类型从文本更改为密码。当我在我的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>
    );
  }
}

我也累了：

      function passInput(passField){
    passField.setAttribute("value","");
    passField.setAttribute("type", "password");
  }

也不起作用，我应该如何解决它们

Answer 1

以反应的方式，我建议：

将输入字段的type和value置于组件的状态。
使用placeholder表示用户应该输入的内容，而不是value（见下文）
例如，我添加了一个onBlur事件处理程序，它将type更改回text（这不是您在现实生活中想要做的事情）

更改您想要反应管理的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)}/>
    );
  }
}

您可以找到working codepen here。

PS：看起来您的设置正在使用“密码”初始化value，并且只要您的组件获得焦点，就会将value更改为（空）。
这将在用户输入密码，然后在外部点击，然后重新聚焦的情况下崩溃。在这种情况下，您的组件将删除（！）任何以前键入的密码 HTML标记为placeholder，可以做得更好。（参见codepen例如）。

Answer 2

onfocus不是React事件系统的一部分。但是，onFocus。试试吧。

此外，您没有正确设置输入值。它应该是element.value = "";而不是element.setAttribute("value","");。

https://facebook.github.io/react/docs/events.html#focus-events

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>
    );
  }
}

https://jsfiddle.net/fkdm8rnL/2/

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

2 个答案: