Question

这个问题与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}
    />

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

欢迎任何反馈和建议，非常感谢您抽出宝贵的时间阅读我的查询并为我解决问题。谢谢！

Answer 1

我认为这与您的逻辑有关。将“百分比”类型设置为数组，并在onChangeText中更改特定项

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

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

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

如何使用react native在列表项中输入文本？

1 个答案: