时间戳

首页 > 解决方案 > 如何允许使用本机反应在列表项中输入文本？

react-native - 如何允许使用本机反应在列表项中输入文本？

问题描述

这个问题与 React Native 相关，特别是文本输入组件。我想创建一个应用程序，允许用户从他们的联系人中选择一些人，并根据他们的选择，创建一个列表，每个人旁边都有文本输入。从那里，他们能够进行文本输入，并使用 onChangeText 函数更改特定键的状态。

下面是我尝试过的代码。我试图更改 prop 内部的百分比状态，我认为这是不正确的，因为所有元素都将共享相同的文本输入。

通过这样做，每当我对一个字段进行文本输入时，文本输入将随后被删除。

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}
    />

我希望实现的是，在选择联系人数量并传输数组数据后，我希望将数组打印出来并且每个列表项的文本输入相互独立。

欢迎任何反馈和建议，我非常感谢您花时间阅读我的查询并帮助我解决我的问题。谢谢！

标签： react-nativetextinputlistitem

解决方案

我认为这与您的逻辑有关..这样的事情应该可行。将“百分比”类型设置为数组并在 onChangeText 中更改特定项目

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

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

onChangeText={(someText) => {
  var {percent} = this.state;
  percent[index] = someText;
  this.setState({percent});
}}

推荐阅读