像在 OO 编程中一样将组件反应为实例

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

您实际上是通过不使用 var（或 const 或 let）声明 inputid 将其设为全局变量。

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

始终使用this.props.inputid 会更简单。如果你想简化render()，把它定义为一个局部变量。

我建议安装eslint并在你的编辑器中启用它来发现这种错误。

---

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

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

onChangeTest 是您的反应类的方法，但您传递给ready() 的匿名函数不是，它不能通过this 引用您的反应组件...除非您绑定吧！

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

或者使用 ES6 语法：

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

必读：How does the "this" keyword work?