javascript - 像OO编程一样将组件作为实例进行响应

我使用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行为。

请问这是否没有道理，我会解释

最佳答案

实际上，通过不使用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()的匿名函数不是，它不能通过this引用您的react组件...除非您将其绑定！

 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?

关于javascript - 像OO编程一样将组件作为实例进行响应，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33955120/