Question

我正在尝试使用react.js库“react-sortable-hoc”（https://github.com/clauderic/react-sortable-hoc）创建一个可排序列表。

在“SortableList”中，我在数组的每个元素上映射一个函数，该函数应该创建一个“SortableElement”，其参数为 key ， index 和 value 。这就是“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>
    );
  });

不幸的是， key 和 index 总是未定义的，我只是不明白为什么。如果您对完整代码感兴趣，请访问https://github.com/rcffc/react-dnd-test/blob/master/src/SortableComponent.js

感谢任何帮助。

Answer 1

如果您查看react-sortable-hoc的来源，您会看到在渲染中传递道具时，index被省略。此外，key并未在道具中传递。如果您更改解构以在SortableItem中记录道具，您将看到一个仅包含值的对象（＆＃39;问题1＆＃39;，＆＃39;问题2＆＃39;等）。如果您需要访问索引或键，请将它们作为不同的道具传递。

e.g。

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>
    );
});

使用ES6将参数传递给React组件

1 个答案: