Как разрешить ввод текста в элемент списка, используя реагировать родной? - PullRequest
1 голос
/ 21 июня 2019

Этот вопрос относится к React Native, а именно к компоненту ввода текста.Я хотел создать приложение, которое позволит пользователям выбирать количество людей из своих контактов и на основе их выбора создавать список с текстовым вводом рядом с ними.Оттуда они могут вводить текст и с помощью функции onChangeText изменяют состояние определенной клавиши.

Ниже приведен код, который я пытался выполнить.Я попытался изменить состояние процентов в подпорке, что, по моему мнению, неверно, поскольку все элементы будут использовать один и тот же текст.

Таким образом, всякий раз, когда я вводил текст в одно поле, он будетстереть впоследствии.

constructor(props) {
    super(props);
    this.state = {
        selected2: undefined,
        description: "",
        amount: "",
        notes: "",
        percent: {},
        selectedContacts:
            this.props.navigation.state.params.selectedContacts,
    };
}

const SelectedList = (props) => {

    const list = ({ allContacts }) => {
        if (allContacts) {
            return allContacts.map((item) => {
                return (
                    <ListItem key={item.id}>
                        <Body>
                            <Text>{`${item.first_name}`}</Text>
                            <Text note>{`${item.phone_number}`}</Text>
                        </Body>
                        <Right>
                            <Item>
                                <Input
                                    placeholder="0"
                                    maxLength={3}
                                    onChangeText={(percent) => {
                                        this.setState({percent});
                                    }}
                                />
                                <Text>%</Text>
                            </Item>
                        </Right>
                    </ListItem>
                )
            })
        }
    }

    <SelectedList
        allContacts={this.state.selectedContacts}
    />

Я надеюсь добиться того, чтобы после выбора количества контактов и передачи данных массива я хотел, чтобы массив выводился на печать, а ввод текста каждого элемента списка не зависел отдруг друга.

Любые отзывы и советы приветствуются, и я очень благодарен вам за то, что вы потратили время на чтение моего запроса и помощь в решении моей проблемы.Спасибо!

1 Ответ

0 голосов
/ 21 июня 2019

Я думаю, что это о вашей логике .. что-то вроде этого должно работать. сделать тип «процентов» массивом и в onChangeText изменить конкретный элемент

this.state = {
 ...
 percent: [],
 ...
}
...

return allContacts.map((item,index) => {
...

onChangeText={(someText) => {
  var {percent} = this.state;
  percent[index] = someText;
  this.setState({percent});
}}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...