Reactjsは、私はこのようなコンポーネントを持っている別の

Question

に一つのコンポーネントから変数を渡す：

class LoginPage extends React.Component{ 
    constructor(props) { 
    super(props); 
    this.state = {submit:''}; 
    this.handleSubmit = this.handleSubmit.bind(this); 
    } 

    handleSubmit(e) { 
    alert('username and password were submitted: ' + this.props.userName + ' and ' + this.props.password); 
    e.prevenDefault(); 
    } 

    render() { 
    return (
     <form onSubmit={this.handleSubmit}> 
     <GetUsername/> 
     <GetPassword/> 
     <button type="submit">Login</button> 
     </form> 
    ) 
    } 
} 

GetUsernameとGETPASSWORDコンポーネントは、ユーザ入力からユーザ名とパスワードを取得します。私の質問は、私は上記のLoginPageコンポーネントのhandleSubmitメソッドにこれらの2つのコンポーネントのユーザー名とパスワードを渡すことができるので、警告がポップアップ表示されるようにすることです。

Answer 1

あなたが探しているものを達成するには、ログインフォームがユーザー名とパスワードを含む独自の状態を持つ必要があります。これらのフィールドを更新するインスタンスメソッドがあります。これらの関数を関連する子コンポーネントに渡し、変更するたびにthis.props.onChangeに適切な値を呼び出します。親コンポーネントは、適切な状態を更新します。ここに例があります。これはいくつかの調整が必要な場合がありますと述べたように、あなたは彼らがその関数を呼び出し、中に適切な引数を渡すので、あなたのGetUsernameとGetPasswordコンポーネントに適切this.props.onChangeを摂取していることを確認する必要があります前に、

class LoginPage extends React.Component{ 
    constructor(props) { 
    super(props); 
    this.state = { 
     submit:'', 
     password: '', 
     userName: '' 

    }; 
    this.handleSubmit = this.handleSubmit.bind(this); 
    this.onUserNameChange = this.onUserNameChange.bind(this); 
    this.onPasswordChange = this.onPasswordChange.bind(this); 
    } 

    onUserNameChange(userName) { 
    this.setState({ 
     userName: userName 
    }) 
    } 

    onPasswordChange(password) { 
    this.setState({ 
     password: password 
    }) 
    } 

    handleSubmit(e) { 
    alert('username and password were submitted: ' + this.state.userName + ' and ' + this.state.password); 
    e.prevenDefault(); 
    } 

    render() { 
    return (
     <form onSubmit={this.handleSubmit}> 
     <GetUsername onChange={onUserNameChange}/> 
     <GetPassword onChange={onPasswordChange}/> 
     <button type="submit">Login</button> 
     </form> 
    ) 
    } 
} 

。

Answer 2

LoginPageコンポーネントの状態の一部にユーザー名とパスワードを作成し、入力が変更されるたびに状態を更新する必要があります。あなたはとGetPasswordのコンポーネントに小道具として渡されるLoginPageで定義されたinputChanged関数を持つことによってこれを行います。

class LoginPage extends React.Component { 
    constructor() { 
    super(); 
    this.state = { 
     username: '', 
     password: '' 
    }; 
    } 

    handleSubmit(e) { 
    e.prevenDefault(); 
    alert('username and password were submitted: ' + this.state.userName + ' and ' + this.state.password); 
    } 

    handleInputChange(name, value) { 
    this.setState({ 
     [name]: value 
    }); 
    } 

    render() { 
    return (
     <form onSubmit={this.handleSubmit}> 
     <GetUsername onChange={newValue => this.handleInputChange('username', newValue)} /> 
     <GetPassword onChange={newValue => this.handleInputChange('password', newValue)} /> 
     <button type="submit">Login</button> 
     </form> 
    ) 
    } 

const GetUsername = ({ onChange }) => (
    <input type="text" name="username" onChange={(e) => onChange(e.target.value)} /> 
);