我遇到了类似这样的问题(特别是在TextInput
value属性中:]
const Stuff = props => {
const [items, setItems] = useState([]);
const handleNewItem = () => {
setItems([...items, '']);
};
const handleText = (text, index) => {
items[index] = text;
setItems(items);
// this was populating correctly in console.log
// as I type, it will come out like ["somedata", "blah"....] etc...
};
return (
<>
<View style={{marginTop: 20}}>
<View>
{items.map((items, index) => {
return (
<View key={index}>
<Text>{index + 1}</Text>
// issue with setting value attribute
// Text would disappear as I type in the input field
<TextInput value={items} onChangeText={text => handleText(text, index)} />
</View>
);
})}
<TouchableOpacity onPress={e => handleNewItem(e)}>
<Text>Add item</Text>
</TouchableOpacity>
</View>
</View>
</>
);
};
我能够使控制台注销items
的正确值,但是在我的移动模拟器上,当我键入内容时,文本消失了。
当我从TextInput组件中删除value={items}
时,我可以在模拟器输入字段中键入内容,而文本不会消失。我一直以为我们需要reactjs的价值。我们不需要吗?还是我做错了?
const Stuff = props => {
const [items, setItems] = useState([]);
const handleNewItem = () => {
setItems([...items, ""]);
};
const handleText = index => e => {
console.log(e);
items[index] = e;
setItems(items);
};
return (
<>
<View style={{ marginTop: 20 }}>
<View>
{items.map((items, index) => {
return (
<View key={index}>
<Text>{index + 1}</Text>
<TextInput
value={items[index]}
onChangeText={handleText(index)}
/>
</View>
);
})}
<TouchableOpacity onPress={e => handleNewItem(e)}>
<Text>Add item</Text>
</TouchableOpacity>
</View>
</View>
</>
);
};