ist dies gültig für den Erhalt des Eingangszustandswerts?

Question

Ich versuche, wieder verwendbare Form und Eingabekomponenten zu bauen und bisher in der Lage war, zu erreichen, was ich bin nach hier ist, wie sie in einer Loginpage Komponente

import React from 'react' 
import classNames from 'classnames/bind' 
import styles from './style.scss' 
import Form from 'components/Form' 
import Input from 'components/Input' 

const cx = classNames.bind(styles) 

export default class LoginPage extends React.Component { 
    constructor (props) { 
    super(props) 
    this.loginUser = this.loginUser.bind(this) 
    } 

    loginUser() { 
    console.log(` 
     Email: ${this.refs.email.state.value} Password: ${this.refs.password.state.value} 
    `) 
    } 

    render() { 
    return (
     <main className={cx('LoginPage')}> 
     <div className={cx('container')}> 
      <Form onSubmit={this.loginUser}> 
      <Input type='email' placeholder='email' ref='email' /> 
      <Input type='password' placeholder='password' ref='password' /> 
      <Input type='submit' value='Log in' /> 
      </Form> 
     </div> 
     </main> 
    ) 
    } 
} 

Ich frage Die Frage ist, verwendet werden, wenn Verwenden Sie this.refs.email.state.value ist ein gültiger Ansatz, um diesen Eingang Komponenten Wert aus seinem Zustand zu bekommen?

Answer 1

Ich glaube nicht, dass Sie refs für Ihren Fall benötigen. Denken Sie daran, dass sie nicht verwendet werden sollten, wenn der normale Datenfluss von props dasselbe erreichen kann. Von the docs

Wenn Sie nicht mehr Anwendungen programmiert hat mit Reaktion, die erste Neigung wird in der Regel sein, zu versuchen Refs zu verwenden, um „Dinge zu machen passieren“ in Ihrer Anwendung. Wenn dies der Fall ist, nehmen Sie sich einen Moment Zeit und denken Sie weiter an kritisch darüber, wo der Status in der Hierarchie der Komponente liegen sollte. Oft wird klar, dass der richtige Ort zum "besitzen", dass Zustand auf einer höheren Ebene in der Hierarchie ist. Platzieren Sie den Zustand dort oft beseitigt jeden Wunsch, Refs zu verwenden, um "Dinge passieren zu lassen" - stattdessen wird der Datenfluss in der Regel Ihr Ziel erreichen.

Ein anderes Warnzeichen sollte string refs are considered legacy sein und wird veraltet sein.

Ein besserer und sicherer Weg, um das zu erreichen, was Sie brauchen, ist, die Eingangsänderung getrennt zu behandeln und diese im lokalen Komponentenzustand zu halten. So würde Ihr Code in etwa so aussehen:

// ...imports... 

const cx = classNames.bind(styles) 

const initialState = { 
    eamil: '', 
    password: '', 
}; 

export default class LoginPage extends React.Component { 
    constructor (props) { 
    super(props); 
    this.loginUser = this.loginUser.bind(this); 
    this.handleChange = this.handleChange.bind(this); 
    } 

    handleChange(e) { 
    let nextState = {}; 
    nextState[e.target.name] = e.target.value; 
    this.setState(nextState); 
    } 

    loginUser() { 
    e.preventDefault(); 
    console.log(` 
     Email: ${this.state.email} Password: ${this.state.password} 
    `) 
    } 

    render() { 
    return (
     <main className={cx('LoginPage')}> 
     <div className={cx('container')}> 
      <Form onSubmit={this.loginUser}> 
      <Input 
       type='email' 
       value={this.state.email} 
       placeholder='email' 
       onChange={this.handleChange} 
      /> 
      <Input 
       type='password' 
       value={this.state.password} 
       placeholder='password' 
       onChange={this.handleChange} 
      /> 
      <Input type='submit' value='Log in' /> 
      </Form> 
     </div> 
     </main> 
    ) 
    } 
} 

Hier ist der Zustand an der Spitze der Formularkomponente. Du könntest es noch allgemeiner machen und einen form Redux-Store mit seinen eigenen Aktionen und Reduzierern haben, aber es sollte dir eine Idee geben.

Lassen Sie mich wissen, wenn Sie Fragen zum Code haben.

Answer 2

Bitte verwenden Sie this.refs.email.value anstelle von this.refs.email.state.value. Ja, es ist eine Standardmethode reagieren in

ODER

Sie können eventlistener onClick befestigen und E-Mail in Zustand zu halten.

export default class LoginPage extends React.Component { 
    constructor (props) { 
    super(props) 
    this.loginUser = this.loginUser.bind(this) 
    } 

    loginUser() { 
    console.log(` 
     Email: ${this.refs.email.value} Password: ${this.refs.password.value} 
    `) 
    } 

    changeEmail(event) { 
    this.setState({ 
     email: event.target.value 
    } 

    render() { 
    return (
     <main className={cx('LoginPage')}> 
     <div className={cx('container')}> 
      <Form onSubmit={this.loginUser}> 
      <Input type='email' value={this.state.value} onClick={this.changeEmail} placeholder='email' ref='email' /> 
      <Input type='password' placeholder='password' ref='password' /> 
      <Input type='submit' value='Log in' /> 
      </Form> 
     </div> 
     </main> 
    ) 
    } 
}