Question

我使用React.creatClass（）

创建了React组件

module.exports = React.createClass({ // input-field-units.jsx is the file name
    displayName: 'input-field-units',
    render: function () {
        return (
            <div >
                <form className="form-inline" role="form">
                    <div className="implement-width-select">
                        <input id={inputid} type="number" className="form-control" onChange={this.onChangeTest}></input>
                        <div className="form-group">
                            <select id="implement-width-unit" className="form-control" defaultValue="m" onChange={this.onChangeTest} >
                                <option value="m" >m</option>
                                <option value="mm">mm</option>
                                <option value="ft">ft</option>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
        );
    },
    componentWillMount: function(){
        inputid = this.props.inputid;
        console.log("component: " + inputid);
    },
    onChangeTest: function(){
    $(document).ready(function () {
        var _unit = document.getElementById("implement-width-unit").value;
        var _widthValue = document.getElementById(inputid).value;
//processing of code here..
});

我打算像C＃中的对象一样调用此组件，如果多次调用它，则不共享属性值。这里的inputid是在componentWillMount（）

中的this.props.inputid中设置的

我在我的应用程序的几个地方使用这个组件（分布式代码在一个文件中）。在我的.jsx文件中，我正在做这个

var InputFieldUnitsComponent = require('../Components/input-field-units.jsx');
var ImplementWidthID = "Implement-Width-ID", againWidthID = "again-width-id";

module.exports = React.createClass({
    displayName: 'PathPlannerSidebarHeader',
    render: function () {
        return (
                <div>
                <h2 className="sidebar-header-subtitle">Implement Width</h2>
                <InputFieldUnitsComponent
                   inputid= {ImplementWidthID} // 1st call
                />
                <h2 className="sidebar-header-subtitle">again Width</h2>
                <InputFieldUnitsComponent
                   inputid= {againWidthID} 
                />
                </div>
        );
        //....
        })

这样每次我都有一个新的this.props.inputid来设置id 但问题是this.props.inputid保持相同的值更改并保持最后一个值。例如，在这种情况下，即使我想第一次调用组件，inputid也会有“again-width-id”。

简而言之，我喜欢OO行为，其中对象的属性不会彼此共享。

请问这是否有意义我会解释

Answer 1

您基本上通过inputid（或var或const）声明let为全局变量。

您可以在this.inputid中说componentDidMount，但这没有多大意义：为什么与this.inputid和this.props.inputid

一直使用this.props.inputid更简单。如果要简化render()，请将其定义为局部变量。

我建议安装eslint并在编辑器中启用它以查找此类错误。

您还需要更新函数onChangeTest。尝试类似的事情是不正确的：

 onChangeTest: function() {
   $(document).ready(function () {
     var _widthValue = document.getElementById(this.inputid).value;
   });
 }

onChangeTest是您的react类的一种方法，但是您传递给ready()的匿名函数不是，并且它不能通过{{1}引用您的反应组件} ...除非你绑定它！

this

或使用ES6语法：

 onChangeTest: function() {
   $(document).ready(function () {
     var _widthValue = document.getElementById(this.inputid).value;
   }.bind(this));
 }

强制阅读：How does the "this" keyword work?

将组件作为OO编程中的实例进行反应

1 个答案: