Передача аргументов для ответа на компонент с использованием ES6

Question

Я пытаюсь создать отсортированный список с помощью библиотеки react.js «response-sortable-hoc» (https://github.com/clauderic/react-sortable-hoc).

В «SortableList» Я карта функцию для каждого элемента массива, который (должны) создать «SortableElement» с аргументами ключевых, индекс и значение. Это как «SortableElement» определяется: https://github.com/clauderic/react-sortable-hoc/blob/master/src/SortableElement/index.js

SortableItem = SortableElement(({value,key}) => 
    <Row> 
     <this.DragHandle/> 
     <ControlLabel>Question</ControlLabel> 
     <FormControl 
     componentClass="textarea" 
     placeholder="Enter question" 
     onChange={()=> { 
      console.log(key);  //why undefined?? 
      console.log(value); 
     } 
     } 
     /> 
    </Row>); 

SortableList = SortableContainer(({items}) => { 
    return (
     <div> 
     {items.map((value, index) => 
      <this.SortableItem key={`item-${index}`} 
          index={index} 
          value={value}/> 
     )} 
     </div> 
    ); 
    }); 

К сожалению, ключ и индекс всегда неопределенными, и я просто не понимаю, почему. Если вас интересует полный код, пожалуйста, посетите https://github.com/rcffc/react-dnd-test/blob/master/src/SortableComponent.js

Любая помощь приветствуется.

Answer 1

Если вы посмотрите на источник для react-sortable-hoc, вы увидите, что при прохождении реквизита в рендере index опущен. Кроме того, key не передается в реквизитах. Если вы измените свое деструктурирование на лог-реквизиты в SortableItem, вы увидите объект, содержащий только значение («Вопрос 1», «Вопрос 2» и т. Д.). Если вам нужно получить доступ к индексу или ключу, передайте их как разные реквизиты.

например.

SortableItem = SortableElement(({value,yourIndex}) => 
    <Row> 
     <this.DragHandle/> 
     <ControlLabel>Question</ControlLabel> 
     <FormControl 
     componentClass="textarea" 
     placeholder="Enter question" 
     onChange={()=> { 
      console.log(yourIndex); 
      console.log(value); 
     } 
     } 
     /> 
    </Row> 
); 

SortableList = SortableContainer(({items}) => { 
    return (
     <div> 
     {items.map((value, index) => 
      <this.SortableItem key={`item-${index}`} 
          index={index} 
          value={value} 
          yourIndex={index} /> 
     )} 
     </div> 
    ); 
});