+ ReduxのNoobのに反応 - フォームデータに

Question

を提出、私はちょうどアウトしようとして始めましたReduxの上のいくつかのチュートリアル後に反応し、反応して、私は、コンソールにエラーを取得しています：

警告：ステートレス機能コンポーネントはできませんrefを与えられます（ログインによって作成されたFieldGroupのref "username"参照）。この refへのアクセスは失敗します。

フォームフィールドの入力値を送信ボタンに渡す適切な方法は何ですか？これらの値はreduxストアに入るべきですか？ドキュメントを読んだ後：https://reactjs.org/docs/refs-and-the-dom.html#a-complete-example私はこの場合はrefsを避ける必要があるようです。だから、refsなしでどのように入力ボタンを送信ボタンに取得するのですか？助けてくれてありがとう。

Login.jsx

import React, {Component, PropTypes} from 'react'; 
import {Row, Col, FormControl, FormGroup, ControlLabel, HelpBlock, Checkbox, Button} from 'react-bootstrap'; 

export default class Login extends Component { 

    render() { 
    const { errorMessage } = this.props; 
    function FieldGroup({ id, label, help, ...props }) { 
     return (
     <FormGroup controlId={id}> 
      <ControlLabel>{label}</ControlLabel> 
      <FormControl {...props} /> 
      {help && <HelpBlock>{help}</HelpBlock>} 
     </FormGroup> 
    ); 
    } 

    const formInstance = (


      <Col xs={12} md={8} mdOffset={2}> 
      <code>&lt;{'Col xs={12} md={8}'} /&gt;</code> 
      <form> 
       <FieldGroup 
       id="formControlsEmail" 
       type="email" 
       label="Email address" 
       placeholder="Enter email" 
       ref="username" 
       /> 
       <FieldGroup 
       id="formControlsPassword" 
       label="Password" 
       type="password" 
       ref="password" 
       /> 
       <Checkbox checked readOnly> 
       Checkbox 
       </Checkbox> 

       <Button type="submit" onClick={(event) => this.handleClick(event)}> 
       Submit 
       </Button> 
       {errorMessage && 
       <p>{errorMessage}</p> 
       } 
      </form> 
      </Col> 

    ); 
    return formInstance; 
    } 

    handleClick(event) { 
    const username = this.refs.username 
    const password = this.refs.password 
    const creds = { username: username.value.trim(), password: password.value.trim() } 
    this.props.onLoginClick(creds) 
    } 
} 

Login.propTypes = { 
    onLoginClick: PropTypes.func.isRequired, 
    errorMessage: PropTypes.string 
} 

Answer 1

機能部品で（ステートレス）レフリーを持っていない反応します。彼らはインスタンスを持っていないので、あなたは、機能部品にREF属性を使用することはできません 公式docs

参考文献および機能コンポーネントから

：あなたの場合

ではなくES6クラスを使用しますあなたが入力した値がFieldGroup

に変更されたときに this.setState(yourState)で代わりに使用する場合は、0123,を親のコンポーネントからクラス構文で使用する必要があります

そして、あなたには、あなたはdocsから

handleClick(event) { 
    const username = this.state.username 
    const password = this.state.password 
    const creds = { username: username.value.trim(), password: password.value.trim() } 
    this.props.onLoginClick(creds) 
    } 

をするでしょう：

あなたは、しかし、限り、あなたはDOM要素を参照するかのような機能部品の内部でREF属性を使用することができますクラスコンポーネント：