Question

我正在使用Backbone JS进行项目构建，我们使用的是az描述的体系结构。我们有连接它们的模型，视图和控制器。

我们最近开始创建一些React组件，我的任务是将Handlebars + JQ Form改制成React Form。

所以我做到了，但是现在我遇到了这个问题：我需要一种方法来获取包含数据的表单组件的状态。

直到现在在车把+ JQ表单中，我们都有

_getFormData（）{return jq_formData; }

仅使用JQ提取数据的方法，但是由于现在表单位于React中，因此再次使用JQ不好。

该表单将使用

初始化

反应：

class Form extends Component {
   state = {}

   getFormData() { return this.state; }

   updateFormData (e) { this.setState({ [e.name]: e.value }) }

   render() { return ( ... Child InputsFields update={this.updateFormData} ...) }  

}

在骨干网中：

 class View {
    $el = $('#formContainer'),

    // my idea is to have something like this 
    _getFormData(){
       return Form.getFormData() 
    }
    render () {
       ReactDOM.render(<Form {...formData} />, this.$el[0])
    }
 }

所以以后我可以按以下方式在Controller中使用View实例：

class Controler {
   this.view = new View();

   this.formData = this.view._getFormData(); // { name: 'tony', age: 34 }
}

我还教过使用

React.createRef（）

但是我不确定如何使用

来实现

ReactDOM.render（form，$ el）

Answer 1

不需要引用，ReactDOM.render已经返回了渲染组件的引用：

this.instance = ReactDOM.render(<Form {...formData} />, this.$el[0]);

因此以后可以通过this.instance.getFormData()对其进行访问。另外，组件状态是公共的，不需要getFormData的getter，可以使用this.instance.state进行检索。

在骨干控制器/类

1 个答案: