Re：親コンポーネントの子コンポーネントのrefの使い方は？

Question

私はここで私の自己を説明します。例えば、私は2つのコンポーネントを持っています。1はModal 2になります。

モーダルには、フォームに渡す機能があります。 フォームには独自のrefが必要です。モーダルが使用できる。私が説明しよう：

class Modal extends Component { 

handleSubmit(e) { 
    e.preventDefault(); 
    if ($(this.refs.form).form('is valid') { 
    //Do something... 
    } 
} 

render() { 
    return (
    <Form ref="form" handleSubmit={::this.handleSubmit} /> 
) 
} 
} 

class Form extends Component { 
render() { 
    return (
    <form onSubmit={this.props.handleSubmit} ref={this.props.ref}> 
    //Inputs go here... 
    </form 
) 
} 
} 

は、今、私たちは動作しませんモーダルに割り当てるrefは...私たちはどのように私はそれらを共有することができます....唯一のFormコンポーネントにフォームの参照を使用することができます??

Answer 1

あなたが本当にこれを必要とする場合：

class Modal extends Component { 

handleSubmit(e) { 
    e.preventDefault(); 
    if(this._form._inner.state.isValid) { 
    //Do something... 
    } 
} 

render() { 
    return (
    <Form ref={c => this._form = c} handleSubmit={this.handleSubmit} /> 
) 
} 
} 

class Form extends Component { 
state = { 
    isValid: false 
} 

render() { 
    return (
    <form onSubmit={this.props.handleSubmit} ref={c => this._inner = c}> 
    //Inputs go here... 
    </form> 
) 
} 
} 

しかし、あなたはコールバックとコンポーネントを構築し、そこにものを行うようにしてください。

ベターは次のようにしてみてください：

class Modal extends Component { 

handleSubmit(isValid) { 
    //... do stuff 
} 

render() { 
    return (
    <Form handleSubmit={this.handleSubmit} /> 
) 
} 
} 

class Form extends Component { 

constructor(props) { 
    super(props); 
    this.onSubmit = this.onSubmit.bind(this); 
} 

validate() { 
    // ... validate 
    this.setState({ isValid: ... }); 
} 

onSubmit() { 
    const { handleSubmit } = this.props; 


    if(handleSubmit) { 
    handleSubmit(this.state.isValid); 
    } 
} 

render() { 
    return (
    <form onSubmit={this.onSubmit}> 
    //Inputs go here... 
    </form> 
) 
} 
} 

をそして、あなたが反応使用している場合、あなたはRLYのjQueryを取り除く必要があります。オーバーロードのビット..