2

我的案例要求我对我拥有的每个时间选择器都使用 React.createRef() （时间选择器中有某些功能只能通过 Refs 使用）。

安装页面后，我最初有 2 个时间选择器。当我只有两个时，一切都很好，但我的工作被毁了，因为我需要使用按钮添加/删除时间选择器。所以我可以很容易地添加时间选择器。

但现在我的问题是如何创建 refs ？我对 React.createRef() 的声明位于前 2 个参考的 Constructor(){} 中。
问题是我在哪里实例化添加 onClick 的时间选择器的参考？

谢谢

4

3 回答 3

2

您应该将时间选择器包装在另一个组件中，在那里创建 ref 并执行需要该组件内部的 ref 的工作，然后通过 props 转发结果（您可以通过 prop 传递函数）。

例如，您可以给每个组件一个唯一的 ID（uuid 做得很好），通过 prop 传递它，传递一个值并传递一个接受 ID 和值的函数，然后每当有结果时调用该函数获得参考。

于 2020-01-31T10:50:35.187 回答
1

你可以做这样的事情，但它要求你有一个不应该是索引的每个组件的唯一标识符。（因为这可能会改变）

伪代码

class Wrapper extends Component {
   construct() {
      ...
      this.refsById = {}
   }
   getRefOrCreate(id) {
    if(_has(this.refsById[id]) {
       return this.refsById[id];
    } else {
       this.refsById[id] = React.createRef();
       return this.refsById[id];
    } 
   } 

  onClickHandler(value, id) {
      const ref = this.refs[id];
      const { onClick } = this.props;
 }

  render(){
     // Here you need to know how many pickers you need, and their id
    const { pickersInformationArray} = this.props; 
    return (
      <div> { pickersInformationArray.map((id) => <TimePicker ref={this.getRefOrCreate(id);} onClick={(value) => { this.onClickHandler(value, id); } } )} </div>
    )
  }
于 2020-01-31T11:06:48.970 回答
0

我找到了解决方案。先说我在我的错误解决方案中使用了在构造函数中创建ref的方法

 class DummyClass extends Component {
     constructor(){ 
         this.timePickerRef = React.createRef();
     }
 }

 render() {
    let timers = array.map( index => {
         <TimePicker
              ref={timepicker => timePickerRef = timepicker} 
              value={00}
              onChange={(data) => 
                      {this.handleTimePcikerValueChange(data, index);}}
         />
    } 
   return (
         timers
   )
 }
}

我所做的是以下

忽略并删除 this.timePickerRef = React.createRef() 因为它不再是必要的

而 handleTimePcikerValueChange & render 中的代码如下：

handleTimePcikerValueChange = (value, index) => {
  // do whatever manipulation you need
  // and access the ref using the following
  this[`timePicker_${index}`] 
}
render() {
    let timers = array.map( index => {
         <TimePicker
              ref={timepicker => this[`timePicker_${index}`] = timepicker} 
              value={00}
              onChange={(data) => 
                      {this.handleTimePcikerValueChange(data, index);}}
         />
    } 
   return (
         timers
   )
 }

我没有发布处理添加时间选择器的代码，因为它无关紧要。我要感谢那些回复的人！

于 2020-01-31T11:28:05.660 回答