入力時に入力がぼやけた

Question

入力を使用して問題が発生しています...私は2つの入力を持っています.1つはオートフォーカスで、もう1つは入力しません。しかし、2番目の入力を入力すると、フォーカスが失われ、フォーカスが最初の入力に戻ります。

私が何かを入力したときにReact rerendersが私のコンポーネントをrerendersと読んだ。私はキーの小道具などを入れてみましたが、何も働かなかった。私のフォーム（新規登録と呼ばれるコンポーネント）で

は、私は次のようしている：

import React from 'react' 
import Input from '../../components/Input' 
import styles from './styles.scss' 

class Signup extends React.Component { 
    constructor (props) { 
    super(props) 
    this.state = { 
     name: '', 
     email: '', 
    } 
    } 

    onSignup (e, userData) { 
    e.preventDefault() 
    this.props.onSignup(userData) 
    } 

    render() { 
    return (
     <main className={styles.wrapper}> 
     <div className={styles.formSide}> 
      <h1>SIGNUP</h1> 

      <Input 
      id="name" 
      label="Name" 
      onChange={e => this.setState({ name: e.target.value })} 
      autofocus={true} 
      /> 
      <Input 
      id="email" 
      label="E-mail" 
      onChange={e => this.setState({ email: e.target.value })} 
      /> 
     </div> 
     </main> 
    ) 
    } 
} 

Signup.propTypes = { 
    onSignup: React.PropTypes.func.isRequired 
} 

export default Signup 

私のコンポーネント入力は、このコードを持っています

import React, { PropTypes } from 'react' 
import MaskedInput from 'react-maskedinput' 
import styles from './styles.scss' 

function Input (props) { 
    let iconComp 

    if (props.icon) { 
    iconComp = (<img src={props.icon} alt="Icon" />) 
    } 

    let input = '' 

    if (props.type === 'date') { 
    input = (
     <MaskedInput 
     ref={inp => inp && props.autofocus && inp.focus()} 
     onChange={props.onChange} 
     mask="11/11/1111" 
     placeholder={props.placeholder} 
     className={styles.input} 
     /> 
    ) 
    } else { 
    input = (
     <input 
     ref={inp => inp && props.autofocus && inp.focus()} 
     onChange={props.onChange} 
     id={props.id} 
     placeholder={props.placeholder} 
     type={props.type} 
     className={styles.input} 
     /> 
    ) 
    } 

    return (
    <div className={styles.wrapper}> 
     <label htmlFor={props.id} className={styles.label}>{props.label}</label> 
     <br /> 
     {input} 
     {props.error && 
     <span className={styles.error}> 
      {props.errorMessage} 
     </span> 
     } 
     {iconComp} 
    </div> 
) 
} 

Input.propTypes = { 
    id: PropTypes.string.isRequired, 
    label: PropTypes.string.isRequired, 
    icon: PropTypes.string, 
    placeholder: PropTypes.string, 
    type: PropTypes.string, 
    autofocus: PropTypes.bool, 
    onChange: PropTypes.func.isRequired, 
    error: PropTypes.bool, 
    errorMessage: PropTypes.string 
} 

Input.defaultProps = { 
    icon: '', 
    placeholder: '', 
    type: 'text', 
    autofocus: false, 
    error: false, 
    errorMessage: '' 
} 

export default Input 

どのように私はこの問題を解決することができますか？

Answer 1

とても簡単解決策は、SignUpコンポーネントを強化して、nameAutoFocusという別のプロパティを作成し、それをtrueに初期化することです。このプロパティを使用して、オートフォーカスブール値を設定します。次に、componentDidMountメソッドとinsideAutoFocusメソッドをfalseに追加します。

class Signup extends React.Component { 
     constructor (props) { 
     super(props) 
     this.state = { 
      name: '', 
      email: '', 
     } 

     this.nameAutoFocus = true; //new 
     } 

     onSignup (e, userData) { 
     e.preventDefault() 
     this.props.onSignup(userData) 
     } 

     //new 
     componentDidMount() { 
     this.nameAutoFocus = false; 
     } 

     render() { 
     return (
      <main> 
      <div> 
       <h1>SIGNUP</h1> 

       <Input 
       id="name" 
       label="Name" 
       onChange={e => this.setState({ name: e.target.value })} 
       autofocus={this.nameAutoFocus} 
       /> 
       <Input 
       id="email" 
       label="E-mail" 
       onChange={e => this.setState({ email: e.target.value })} 
       /> 
      </div> 
      </main> 
     ) 
     } 
    } 

これはnameAutoFocusの初期値は、それがフォーカスを与える入力に渡されるため、その後componentDidMountがfalseにそれがtrueにオートフォーカスプロパティを設定しませんので、次回の状態の変更を、それを設定することで実行されます動作します。これは本質的に、最初にレンダリングされたときに一度だけフォーカスを与えることです。

codepen：http://codepen.io/floor_/pen/PmNRKV?editors=0011 実行をクリックすることを忘れないでください。

Answer 2

問題は、入力をレンダリングするたびに、新しい線の矢印関数がrefのために作成されて呼び出されます。したがって、毎回inp.focus()を実行します。これを避ける1つの方法は、クラスコンポーネントを使用して、クラス関数としてrefコールバックメソッドを定義することです。

class Input extends React.Component { 

    refCallback(inp){ 
    if(this.props.autofocus) inp.focus(); 
    } 

    render(){ 
    let input = '' 

    if (this.props.type === 'date') { 
     input = (
     <MaskedInput 
      ref={this.refCallback} 
      onChange={this.props.onChange} 
      mask="11/11/1111" 
      placeholder={this.props.placeholder} 
     /> 
    ) 
    } else { 
     input = (
     <input 
      ref={this.refCallback} 
      onChange={this.props.onChange} 
      id={this.props.id} 
      placeholder={this.props.placeholder} 
      type={this.props.type} 
     /> 
    ) 
    } 

    return (
     <div> 
     <label htmlFor={this.props.id}>{this.props.label}</label> 
     <br /> 
     {input} 
     </div> 
    ) 
    } 
} 

export default Input 

更新codepen：http://codepen.io/anon/pen/jmqxWy

（私の以前のコードでは、私はそれをテストすることができませんでしたので、いくつかの問題があった。しかし、今、私は、コードを更新しましたし、それが動作します。）