Реагируйте на редукционный компонент рендера внутри себя - PullRequest
Новая
       16

Реагируйте на редукционный компонент рендера внутри себя

0 голосов
/ 04 июня 2018

У меня есть компонент формы, и я хочу сделать кликабельную ссылку внутри формы.Когда люди нажимают на эту ссылку, подчиненная форма будет отображаться во всплывающем окне.Примерно так: 

class Form extends React.Component{
    componentDidMount(){
       this.props.loadForm(this.props.url)
    }
    render(){
        const { subfrom, loadSubForm } = this.props;
        return(
          <form>
             <button onClick={()=>loadSubForm(url)}>Load Sub-Form</button>

             { /** Render Parent Form Here ***/ }

             { subform && <Popup><Form url={subform.url} /></Popup> }

          </form>
        )
    }
}

const mapStateToProps = (state) => {
    return{
       subform:state.getIn(["form",subform"])
    }
}
const mapDispatchToProps = (dispatch, props)  => {  
    return{
       loadForm: (route)=>{

           /** Ajax to load form **/
       }
       loadSubForm: (route) =>{
          dispatch(loadSubForm(route))
       }
    }
}

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(Form);

При загрузке подчиненной формы я получаю сообщение об ошибке:

loadForm function is not props of Form.

Ответы [ 2 ]

0 голосов
/ 05 июня 2018

Спасибо @Shubham, это работа.Это решение 

 class Form extends React.Component{
        componentDidMount(){
           this.props.loadForm(this.props.url)
        }
        render(){
            const { subfrom, loadSubForm } = this.props;
            let SubForm =  connect(mapStateToProps,mapDispatchToProps)(Form);

            /** If you use Redux Form **/
            SubForm =   reduxForm({})(SubForm);
            return(
              <form>
                 <button onClick={()=>loadSubForm(url)}>Load Sub-Form</button>

                 { /** Render Parent Form Here ***/ }

                 { subform && <Popup><SubForm id="suform" url={subform.url} /></Popup> }

              </form>
            )
        }
    }

    const mapStateToProps = (state,props) => {
        const formid = props.id
        return{
           subform:state.getIn(["form",formid,subform"])
        }
    }
    const mapDispatchToProps = (dispatch, props)  => {  
        const formid = props.id
        return{
           loadForm: (route)=>{

               /** Ajax to load form **/
           }
           loadSubForm: (route) =>{
              dispatch(loadSubForm(route,formid))
           }
        }
    }

   /** If you use Redux Form **/
   Form =   reduxForm({})(Form);

    export default connect(
        mapStateToProps,
        mapDispatchToProps
    )(Form);

ПРИМЕЧАНИЕ. Нам нужно передать идентификатор формы в компонент и редуктор.В противном случае редуктор не знает, какую форму слушать, и у вас будет бесконечный цикл.

0 голосов
/ 04 июня 2018

Вложенному компоненту вы не передаете функции loadForm или loadSubForm, либо добавляете условную проверку их использования, либо также передаете их 

class Form extends React.Component{
    componentDidMount(){
       this.props.loadForm(this.props.url)
    }
    render(){
        const { subform, loadSubForm } = this.props;
        return(
          <form>
             <button onClick={()=>loadSubForm(url)}>Load Sub-Form</button>

             { /** Render Parent Form Here ***/ }

             { subform && <Popup><Form url={subform.url} loadForm={() => {// do something here}} loadSubForm={() => { //whatever you wanna do here}}/></Popup> }

          </form>
        )
    }
}

или 

class Form extends React.Component{
    componentDidMount(){
       this.props.loadForm && this.props.loadForm(this.props.url)
    }
    render(){
        const { subform, loadSubForm } = this.props;
        return(
          <form>
             <button onClick={()=>{loadSubForm && loadSubForm(url)}}>Load Sub-Form</button>

             { /** Render Parent Form Here ***/ }

             { subform && <Popup><Form url={subform.url} /></Popup> }

          </form>
        )
    }
}
...