Управляйте вводом внутри списка в React - PullRequest
Новая
       27

Управляйте вводом внутри списка в React

0 голосов
/ 24 мая 2018

Я вызываю GET с сервера, и этот запрос возвращает массив из N объектов.Затем в этом массиве я генерирую список, используя Antd следующим образом: 

render() {
        return (
            <List
                dataSource={this.props.images}
                renderItem={image => (
                    <List.Item actions={
                        [
                            <Icon key={"1"+image.Id.toString()} onClick={(e) => this.actionClick('RUN',image.Id, image.RepoTags[0].replace(/[^a-zA-Z0-9]/g,'_'), e)}
                                  className="icon" type="caret-right" />,
                            <Popconfirm placement="topRight" title="Are you sure delete this image?"
                                        onConfirm={(e) => this.actionClick('REMOVE_IMAGE',image.Id, e)} okText="Yes" cancelText="No">
                                <Icon key="4" className="icon" type="close" />
                            </Popconfirm>
                        ]
                    }>
                        <List.Item.Meta
                            title={image.RepoTags[0]}
                            description={image.Labels ? image.Labels.maintainer : ''}
                        </List.Item.Meta>
                            <InputGroup compact className={'inputGroup'}>
                                <Input style={{ width: '50%' }} placeholder={'inner port'} value={this.state.innerPort} onChange={evt => this.updateValue("innerPort",evt)}/>
                                <Input style={{ width: '50%' }} placeholder={'redirect'} value={this.state.redirectPort} onChange={evt => this.updateValue("redirectPort",evt)}/>
                            </InputGroup>

                    </List.Item>
                )}
            >
            </List>
        );
    }

Как вы можете видеть в коде, у меня есть InputGroup для каждого List.Item, и я сохраняю значениев состоянии, используя: 

updateValue(k,v) {
        console.log("key", k, "value", v);
        console.log(this.state);
        this.setState({
            [k]:v.target.value
        });
    }

Проблема здесь в том, что у меня есть одно и то же значение для каждого List.Item в List.

Как я могу решить эту проблему с несколькими List.Вещь?Я думал о массиве, но я не сделал эту работу.

Ответы [ 2 ]

0 голосов
/ 24 мая 2018

Измените ваш ввод на 

<Input style={{ width: '50%' }} placeholder={'inner port'} value={this.state["innerPort"+image.id] } onChange={evt => this.updateValue("innerPort",image.Id,evt)}/>

, это отправит уникальный идентификатор функции обновления, а затем вы сможете использовать его как 

updateValue(k,id,v) {
        console.log("key", k, "value", v);
        console.log(this.state);
        var myKey=k+id
        this.setState({
            [myKey]:v.target.value
        });
    }
0 голосов
/ 24 мая 2018

Вы пытались использовать FlatList вместо List, чтобы можно было передать индекс элемента отображаемому элементу.

...