javascript - 为什么这些类似的反应函数传递语句以不同的方式工作？

Question

我有一个简单的反应页面，显示一个树组件和一系列字段。现在我对树进行了硬编码，但字段作为道具传入。作为 props 传入的还有两个父回调。一个用于 Tree onSelect，一个用于 <input> onChange 事件。在这两种情况下，特定的“on”事件都是一个本地函数，它反过来调用父级的回调。这一切都在工作......

在这两种情况下，本地函数都引用“this”变量。在一个本地函数 Tree onSelect' 中，我必须使用 '.bind(this)' 方式，但在另一个函数中我没有。两个本地函数都可以访问“this.props”。价值观。但是，如果我从 Tree 组件中使用的那个中删除“.bind(this)”，它就会失败。'this' 未定义。

我是新来的反应，所以我只是想弄清楚什么去哪里。我猜这与 Tree 作为一个组件和 <input> 作为更基本的东西有关吗？

感谢您的任何见解...

import React, { Component } from "react";
import Tree from '@naisutech/react-tree'
import './RecipePage.css';

class RecipePage extends Component {

constructor(props){
    super(props);
    this.state = { items: props.items,};
}

onMySelect (props)  {
    debugger;
    const items = this.state.items.slice();
    console.log("HI" , props);
}

handleChange = ({ target }) => {
    debugger;
    const items = this.state.items.slice();
    items[parseInt(target.id)+1].defaultValue = target.value;
    this.setState({items: items,});
    var props = {items, target};
    this.props.onInputChanged(props); // call the parent's update function send relavent data.
};

render() {

    const t8000 = [
        {
            label: 'Gauge 1',
            id: 1234,
            parentId: null,
            items: null
        },
        {
            label: 'Target',
            id: 1236,
            parentId: 1234,
            items: null
        },
        {
            label: 'Gage Factor',
            id: 5678,
            parentId: 1234,
            items: null
        },
        {
            label: 'Gauge 2',
            id: 1235,
            parentId: null,
            items: null
        },
        {
            label: 'Target',
            id: 2236,
            parentId: 1235,
            items: null
        },
    ]

    const myTheme = {
        'my-theme': {
            text: '#161616', 
            bg: '#f1f1f1',
            highlight: '#cccccc', // the colours used for selected and hover items
            decal: 'green', // the colours used for open folder indicators and icons
            accent: '#f1f1f1' // the colour used for row borders and empty file indicators
        }
    }

    return(
       <div id="recipePage" className="recipeMenu" >
           <div className="closeButton"  >
               <img src={require('./../CommonImages/closeButton_W_90x90.png')} height="90px" onClick={() => this.props.close()} alt="Menu buttons"></img>
                    <Tree nodes={t8000} onSelect={this.onMySelect.bind(this)} theme = {'my-theme'} customTheme={myTheme} />
                    <form>
                    <fieldset>
                    <legend>this.state.items[0].label}</legend>
                    {this.state.items.map((item, key) =>(
                       <div className={item.show===1 && key!==0 ?"ShowInputs":"HideInputs"}>
                                    <label htmlFor={item.id}>{item.label} </label>
                                    <input type="text" name={item.id}
                                    id={item.id} value={item.defaultValue}
                                    onChange={this.handleChange} /> 
                        </div>
                     ))}
                     </fieldset>
              </form>
           </div>
       </div>
    );
                        }
}
export default RecipePage;

标签： javascriptreactjs