Masz komponent reagujący, który tworzy wiele przycisków, ale nie wiem, jak poradzić sobie z akcją w zależności od tego, który przycisk jest wciśnięty, jest to komponent:

var SingleChoiceGroup = React.createClass({
    render(){
        var numberOfButtons = this.props.numberOfButtons;
        var prefix = this.props.prefix;
        var buttons = [];

        for(var i = 0;i<numberOfButtons;i++){
            buttons.push(
                <Button value={i} onClick={() => this.props.selectedItem(i)}>{prefix + " " + (i+1)}</Button>
            );
        }

        return(
            <div>
                {buttons}
            </div>
        )
    }
});

I to jest metoda, którą chcę uzyskać parametr:

var AnotherComponent = React.createClass({
    selectedDay(i){
        // Here I want to read the index parameter from the other component.
    },

    render(){
        <SingleChoiceGroup selectedItem={() => this.selectedDay()} numberOfButtons={7} prefix={"Text"}/>
    }    
});
0
Karlo A. López 16 luty 2017, 19:41

2 odpowiedzi

Najlepsza odpowiedź

W Twoim kodzie znajdują się dwa problemy. Pierwszy jest tutaj:

<SingleChoiceGroup selectedItem={() => this.selectedDay()} numberOfButtons={7} prefix={"Text"}/>

Ponieważ funkcja strzałki {X0}} nie bierze żadnych argumentów, wartość {X1}} przekazana przez Singlechoiiicegroup jest utracona.

Możesz to rozwiązać, zmieniając go do selectedItem={i => this.selectedDay(i)}, ale zamiast przekazywać funkcję, która wywołuje this.selectedDay, możesz po prostu przejść this.selectedDay, I.e.:

<SingleChoiceGroup selectedItem={this.selectedDay} numberOfButtons={7} prefix={"Text"}/>

Drugi problem, ponieważ Bartek wskazał w swojej odpowiedzi, jest to, że i w naszej pętli for jest odniesieniem do tego samego obiektu w każdej iteracji pętli, a od jego wartości końcowej jest {{x2 }} To wartość, którą obsługiwanie zdarzeń dostaje dla każdego przycisku. W tej odpowiedzi jest szersza dyskusja na temat tego tematu W tej odpowiedzi. TL; DR jest użycie let zamiast var, aby uczynić pętlę for zainicjować nową zmienną blokadę blokady za każdym razem.

Oba te zmiany w fragmencie roboczym:

const Button = props => <button type="button" {...props}/>;

var SingleChoiceGroup = React.createClass({
    render(){
        var numberOfButtons = this.props.numberOfButtons;
        var prefix = this.props.prefix;
        var buttons = [];

        for (let i = 0; i < numberOfButtons; i++){
            buttons.push(
                <Button key={i} value={i} onClick={() => this.props.selectedItem(i)}>{`${prefix} ${i+1}`}</Button>
            );
        }
        
        return <div>{buttons}</div>;
    }
});

var AnotherComponent = React.createClass({
    selectedDay(i){
      console.log('clicked %d', i);
    },

    render(){
        return <SingleChoiceGroup selectedItem={this.selectedDay} numberOfButtons={7} prefix="Text"/>
    }    
});

ReactDOM.render(<AnotherComponent/>, document.getElementById('container'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
Click on us: <div id="container"></div>
1
Community 23 maj 2017, 12:00

W twoim komponencie Singlechoiasgroup Użyj let Insetad o var w Loop for - W przeciwnym razie kliknięcie kliknięcia użyci ostatniej wartości i, która ma 7 w swoim przypadku (dlaczego? Proszę o to zobaczyć Więc odpowiedz do szczegółowego wyjaśnienia zamknięcia w for pętle ):

 for(let i = 0;i<numberOfButtons;i++){
        buttons.push(
            <Button value={i} onClick={() => this.props.selectedItem(i)}>{prefix + " " + (i+1)}</Button>
        );
    }
1
Community 23 maj 2017, 12:16