2016-09-26 15 views
2

親コンポーネントには、基本的にはフォームがあり、ローダを持つオーバーレイがあり、親の状態に基づいて表示する必要があります。親状態に基づいて反応コンポーネントを動的にレンダリングします。

import React from 'react'; 
import Overlay from './overlay'; 

export default class RegisterForm extends React.Component { 
    constructor { 
    this.state = { 
     loading: false 
    }; 
    } 
    handleSubmit(){ 
    this.state.loading = true; 
    ... 
    } 

    render(){ 
    return(
    <form onSubmit={() => this.handleSubmit()}> 
    ... 
    <Overlay /> 
    </form> 
    ); 
    } 
} 

どのようにすればいいですか?

私もAを設定してみました...

を私はReact.cloneElement(<Overlay />, {})を試してみましたが、私はどのように再追加この子の親に知らないと私は理解して、それは物事のリアクト通行ではありませんprop OB OverlayReact.cloneElement(<Overlay />, { visible = this.state.loading })のような親のstate、に基づいていますが、

答えて

4

は、あなたがコンポーネントレンダリングする三項演算子を使用してください...それは仕事を得るように見えることはできません。 React JSXは、レンダリングのためのIf-elseロジックをサポートします{(this.state.loading == false) ? <Overlay /> : null}

this.setState({loading: true});を使用して、直接割り当てではなく状態を変更する必要があります。また、私は質問

render() { 
    return (
    <form onSubmit={this.handleSubmit}> 
     { this.state.loading == false && <Overlay /> } 
    </form> 
); 
} 

場合の三項演算子より以下の式を好むあなたのhandleSubmit();

import React from 'react'; 
import Overlay from './overlay'; 

export default class RegisterForm extends React.Component { 
    constructor { 
    this.state = { 
     loading: false 
    }; 
    } 
    handleSubmit(event){ 
    event.preventDefault(); 
    this.setState({loading: true}); 
    ... 
    } 

    render(){ 
    <form onSubmit {()=>{this.handleSubmit()}> 

    {(this.state.loading == false) ? <Overlay /> : null} 
    </form> 
    } 
} 
+0

残念ながら、これはどちらか動作しません。私は '{(this.state.loading == true)? :null} 'と' {(this.state.loading)? :null} 'と' {this.state.loading && } ' – afkatja

+0

あなたのhandleSubmitにevent.preventDefaultを使用してください。更新された答えを確認してください –

+0

私はすでに元のコードでこれを持っていました。 (それは無関係だと思った?) – afkatja

3

event.preventDefault()を使用するレンダリング機能でリターン節を欠場していない覚えておいてください。割り当てによって状態を直接変更しないことを忘れないでください。ここでは、ボタンをクリックしてフォームを送信し、読み込みメッセージを表示する作業コンポーネントがあります。これは、行動を達成するための典型的なリアクション方法です。

class HelloWidget extends React.Component{ 
    constructor(props) { 
    super(props); 
    this.handleSubmit = this.handleSubmit.bind(this) 
    this.state = { 
     loading: false 
    }; 
    } 
    handleSubmit() { 
    this.setState({ loading: true }); 
    } 
    render() { 
    return (
     <form onSubmit={this.handleSubmit}> 
     { this.state.loading && <div>loading...</div> } 
     <button>click</button> 
     </form> 
    ); 
    } 
} 

付録 - 以下は、2つの速記トリックです。

三項演算子:

速記

render() { 
    return condition === someCondition ? <CompA /> : <CompB />; 
} 

手書き

render() { 
    if (condition === someCondition) { 
    return <CompA />; 
    } else { 
    return <CompB />; 
    } 
} 

ブールAND演算子& &:

速記

render() { 
    return condition === someCondition && <CompA />; 
} 

手書き

render() { 
    if (condition === someCondition) { 
    return <CompA />; 
    } else { 
    return null; 
    } 
} 
+0

ありがとう!私は 'this.state.loading && 'を試しましたが、何も起こらなかった... – afkatja

+0

コンストラクタでハンドルをバインドしましたか? – Season

+0

私は質問を編集しました:私の提出ハンドラは次のように行われました: 'onSubmit = {()=> this.handleSubmit()}' – afkatja

関連する問題