Как передать реквизит компонентам, описанным в const в ReactJS - PullRequest
0 голосов
/ 09 июня 2018

Я использую библиотеку реагировать-сортируемый-hoc, чтобы отсортировать список предметов.Больше, чем просто перечисление, мне нужно запустить функциональность при нажатии на один элемент.Перечисление и сортировка и все работает нормально.Как я могу передать реквизит, который должен называться clickFunction(), который утешает имя, когда я щелкаю по имени, указанному через SortableItem?

import {SortableContainer, SortableElement, arrayMove} from 'react-sortable-hoc';

const SortableItem = SortableElement(({value}) => <li>{value.first_name}</li>);

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

class Details extends React.Component {

    clickFunction(name) {
        console.log(name)
    }

    onSortEnd({oldIndex, newIndex}) {
        this.setState({
          testlist: arrayMove(this.state.testlist, oldIndex, newIndex),
        });
    };

    render() {
        return (
            <div>
                <SortableList items={this.state.testlist} onSortEnd={this.onSortEnd.bind(this)} pressDelay="200" />
            </div>
        )
    }
}

Ответы [ 2 ]

0 голосов
/ 09 июня 2018

Это пример передачи реквизитов в SortableContainer:

const SortableList = SortableContainer(({items, props, handleClickFunction, fieldSelector}) => {
    const subComponentList = [];
    items.map((value, index) =>
        subComponentList.push(
        <SortableItem 
            key={`item-${index}`} 
            index={index}
            value={value} 
            props={props} 
            handleClickFunction={handleClickFunction}
            fieldSelector={fieldSelector} 
        />)
    );

    return (
        <ul>{subComponentList}</ul>
    );
});
0 голосов
/ 09 июня 2018

Вы можете передать функцию из компонента Details и получить ее в реквизитах SortableList и SortableItem, например

import {SortableContainer, SortableElement, arrayMove} from 'react-sortable-hoc';

const SortableItem = SortableElement(({value, clickFunction}) => <li onClick={() => clickFunction(value)}>{value.first_name}</li>);

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

class Details extends React.Component {

    clickFunction(name) {
        console.log(name)
    }

    onSortEnd({oldIndex, newIndex}) {
        this.setState({
          testlist: arrayMove(this.state.testlist, oldIndex, newIndex),
        });
    };

    render() {
        return (
            <div>
                <SortableList items={this.state.testlist} onSortEnd={this.onSortEnd.bind(this)} pressDelay="200" clickFunction={this.clickFunction} />
            </div>
        )
    }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...