Question

我在react.js中使用jqwidget进行网格。我有JqxListBox在我的父组件中有一个选项列表。

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return <JqxListBox ref='myListBox' style={{ float: 'left' }} width={150} height={150} source={listBoxSource} checkboxes={true} />;
  }
}

当用户在jqxlistbox中选择或取消选择某个选项时，我想在网格中打开show和hide coloumn，但是在子组件中不访问refs。如何访问子组件中的jqxlistbox属性做出反应。在子componentDidMount函数中，我正在访问ref之类的。

class ChildComponent extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    // Cannot read property 'on' of undefined
    this.refs.myListBox.on('checkChange', (event) => {
      console.log("something");
    });
  }

  render() {
    return <div>Child component</div>;
  }
}

它给我错误：TypeError：无法读取未定义

的属性'on'

Answer 1

他们访问refs的方式在React class ChildComponent extends React.Component { constructor(props) { super(props); // Declare and initialize the ref in the constructor this.myListBox= React.createRef(); } componentDidMount() { // Access the ref this.myListBox.on('checkChange', (event) => { this.props.onEventFromParentComponent(event); }); } render() { return <JqxListBox ref={this.myListBox} style={{ float: 'left' }} width={150} height={150} source={listBoxSource} checkboxes={true} />; } }中发生了变化：

这是你应该设置它的方式：

public void UpdatePopulations(IEnumerable<Animal> newAnimals)
{
    var dictionary = newAnimals.ToDictionary<string, int>(a=>a.Name, a=>a.currentPopulation); // convert to dictionary, so that we have O(1) lookup during the search later. This process itself is O(n)
    foreach(var animal in animalList) // this will be O(n)
    {
        if(dictionary.ContainsKey(animal.Name))
        {
            animal.currentPopulation = dictionary[animal.Name].currentPopulation;
        }
    }
}

反应使用refs从父母到孩子

1 个答案: