用いたフォームや入力要素を正しく

Question

私は、再利用可能なフォームと入力コンポーネントを作成しようと、これまでに得てる次

フォーム

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

const cx = classNames.bind(styles) 

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

    submitForm (e) { 
    e.preventDefault() 
    this.props.onSubmit() 
    } 

    render() { 
    return (
     <form className={cx('Form')} onSubmit={this.submitForm}> 
     {this.props.children} 
     </form> 
    ) 
    } 
} 

Form.propTypes = { 
    children: React.PropTypes.any.isRequired, 
    onSubmit: React.PropTypes.func.isRequired 
} 

入力

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

const cx = classNames.bind(styles) 

export default class Input extends React.Component { 
    constructor (props) { 
    super(props) 
    this.state = { 
     value: this.props.value || '' 
    } 
    this.changeValue = this.changeValue.bind(this) 
    } 

    changeValue (e) { 
    this.setState({value: e.target.value}) 
    } 

    render() { 
    return (
     <div className={cx('Input')}> 
     <input 
      type={this.props.type} 
      value={this.state.value} 
      required={this.props.required} 
      onChange={this.changeValue} 
      placeholder={this.props.placeholder || ''} 
      noValidate /> 
     </div> 
    ) 
    } 
} 

Input.propTypes = { 
    type: React.PropTypes.string.isRequired, 
    value: React.PropTypes.string, 
    required: React.PropTypes.bool, 
    placeholder: React.PropTypes.string 
} 

それから、別のコンポーネント内でそれらを使用すると、HomePageComponent

<Form onSubmit={this.loginUser}> 
    <Input type='email' placeholder='email' /> 
    <Input type='password' placeholder='password' /> 
    <Input type='submit' value='Submit' /> 
</Form> 

このすべてがうまく動作しますが、私は、入力値を取得し、あなたがInputコンポーネントに値を格納する必要はありませんthis.state= { email: [value from input email], password: [value from password input] }

Answer 1

にHomePageComponentの状態を設定するためにそれらを使用する方法について説明します。

あなたは、個々の入力にreferencesを維持することにより、入力値を取得することができます。そして、

<Form onSubmit={this.loginUser}> 
    <Input ref='email' type='email' placeholder='email' /> 
    <Input ref='password' type='password' placeholder='password' /> 
    <Input type='submit' value='Submit' /> 
</Form> 

、loginUserにあなたが使用してこれらにアクセスすることができます：あなたの入力にname属性を追加する場合

const email = ReactDOM.findDOMNode(this.refs.email).value; 
const password = ReactDOM.findDOMNode(this.refs.password).value; 

Answer 2

この方法で値にアクセスできます。あなたは、フォームの入力が "Chaged" 親の設定状態にしたい、これは

import React, { PropTypes, Component } from 'react'; 
 
class Form extends Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.handleSubmit = this.handleSubmit.bind(this); 
 
    } 
 
    
 
    handleSubmit(e) { 
 
    e.preventDefault(); 
 
    const form = e.target.elements; 
 
    console.log(form.email.value); 
 
    console.log(form.password.value); 
 
    } 
 
    
 
    render() { 
 
    return (
 
     <form className={cx('Form')} onSubmit={this.handleSubmit}> 
 
     <Input type='email' placeholder='email' name='email' /> 
 
     <Input type='password' placeholder='password' name='password' /> 
 
     <button type="submit">Submit</button> 
 
     </form> 
 
    ); 
 
    } 
 
}