reactJSコンポーネントファイルの関数の呼び出しと呼び出し方法

Question

私はログインページを作成しています。パスワード領域をオンにすると、入力タイプをテキストからパスワードに変更する関数が必要です。 私は自分の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

onfocusを修正する必要がありますどのように、また、動作しませんされていませんリアクションイベントシステムの一部。しかし、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/

Answer 2

、私がお勧めします：

• をあなたのコンポーネントの状態で、入力フィールドのtypeとvalueを置きます。
• 例えば
• （下記参照）の代わりにvalueの、ユーザーが入力すべきかを示すために使用placeholder、私は戻ってtextにtypeを変更onBlurイベントハンドラ、（あなたが本当にしたいと思うではない何かを追加しました人生）

あなたが管理したいと思っているDOM部分を変更することは、一般的に非常に悪い考えです。入力コンポーネントのタイプを変更するためにrefを使用しないことを強くお勧めします。あなたの挑戦へ

より反応するようなソリューションは、次のようになります

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を見てください）。