Я хочу добавить значение в массив по нажатию в реагировать

Question

Я хочу добавить значение в массив в состоянии onClick событие в React.

Пока что с функцией onSelectRooms я могу получить значение с помощью e.target.id, но он не добавляет значение в массив selectedRooms, который находится в состоянии.

    onSelectRooms = (e) => {

        const newItem = e.target.id; 

        this.setState({
            selectedRooms: [...this.state.selectedRooms, newItem]}); 
    }

export default class ExportReportRoomSelectionModal extends React.Component {

    constructor(props) {
        super(props);

        const roomOrder = configContext.value.roomOrder;


        this.state = {
            rooms: roomOrder,
            selectedRooms: [],
        };


        this.onSelectRooms = this.onSelectRooms.bind(this);

    }

    onSelectRooms = (e) => {

        const newItem = e.target.id; 

        this.setState({
            selectedRooms: [...this.state.selectedRooms, newItem]}); 
    }


    render() {

        return (
            <Modal>
                <Modal.Header>
                    <Modal.Title>Title</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <p>Number of rooms: {this.state.rooms.length}</p>
                    <p>Rooms:</p>

                    <Grid fluid={true}> 
                        <Row className="show-grid">
                            { this.state.rooms.map((name, i ) => 

                                <Col key={i}>
                                    <Panel onClick={this.onSelectRooms}>  
                                        <Panel.Heading id={name}> 
                                            {name}                               
                                        </Panel.Heading>
                                    </Panel> 
                                </Col>
                            )}
                        </Row>
                    </Grid>

                </Modal.Body>

            </Modal>);
    }
}

Answer 1

измените onSelectRooms () с кодом ниже и отметьте

    onSelectRooms = (e) => {
        const newItem = e.target.id; 
        let roomArray = this.state.selectedRooms;
        roomArray.push(newItem);                   //add value in local array
        this.setState({selectedRooms: roomArray}); //replace selectedRooms with local arry
    }

наслаждайтесь!

Answer 2

Вы можете передать index выбранной комнаты функции onSelectRooms.

export default class ExportReportRoomSelectionModal extends React.Component {

    constructor(props) {
        super(props);

        const roomOrder = configContext.value.roomOrder;


        this.state = {
            rooms: roomOrder,
            selectedRooms: [],
        };

    }

    onSelectRooms = (e, index) => {
        this.setState(prevState => ({
            selectedRooms: [...prevState.selectedRooms, index]
        })); 
    }


    render() {

        return (
            <Modal>
                <Modal.Header>
                    <Modal.Title>Title</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <p>Number of rooms: {this.state.rooms.length}</p>
                    <p>Rooms:</p>

                    <Grid fluid={true}> 
                        <Row className="show-grid">
                            { this.state.rooms.map((name, i ) => 

                                <Col key={i}>
                                    <Panel onClick={() => this.onSelectRooms(i)}>  
                                        <Panel.Heading id={name}> 
                                            {name}                               
                                        </Panel.Heading>
                                    </Panel> 
                                </Col>
                            )}
                        </Row>
                    </Grid>

                </Modal.Body>

            </Modal>);
    }
}

Answer 3

Вы можете попробовать это,

const joined = this.state.selectedRooms.concat(newItem);
this.setState({ selectedRooms: joined })

Answer 4

Создайте поле ввода и определите имя для этого поля ввода.
И собирать данные из этого поля ввода с помощью

this.refs.inputFieldName.value

и

вставьте это в объявленную переменную массива.
Ниже Git Project ссылка с полным текстом и документацией.
Попробуйте

https://gitlab.com/ripon52/reactcrud