Javascript 如何使用TextInput更新文本
我在试图找出如何编辑已经制作好的文本时遇到了一些问题 我已经做了大部分的事情，而我一直停留在一个按钮，更新文本到新的更新文本。当我使用console.log时，我可以看到更新的文本，但它不会更新文本。那还是一样。下面您可以看到完整的代码，我认为updateTodo函数做得不对Javascript 如何使用TextInput更新文本,javascript,reactjs,react-native,Javascript,Reactjs,React Native,我在试图找出如何编辑已经制作好的文本时遇到了一些问题 我已经做了大部分的事情，而我一直停留在一个按钮，更新文本到新的更新文本。当我使用console.log时，我可以看到更新的文本，但它不会更新文本。那还是一样。下面您可以看到完整的代码，我认为updateTodo函数做得不对 export default function App() { const [updateTaskId, setUpdateTaskId] = useState(''); const [updateTaskTitl
export default function App() {
const [updateTaskId, setUpdateTaskId] = useState('');
const [updateTaskTitle, setUpdateTaskTitle] = useState('');
const [todos, setTodos] = useState([]);
const updateTodo = () => {
const todoAsync = [
...todos,
{
key: updateTaskId,
name: updateTaskTitle,
},
];
setTodos(todoAsync);
};
const renderitem = ({item}) => {
return (
<View
style={{
flex: 1,
backgroundColor: colors.card,
margin: 10,
elevation: 1,
borderRadius: 10,
padding: 10,
}}>
<View style={{flexDirection: 'row'}}>
<Fontisto
name={item.isChecked ? 'checkbox-active' : 'checkbox-passive'}
size={20}
color={colors.text}
onPress={() => checkTodo(item.key)}
/>
<TouchableOpacity
onLongPress={() => {
setUpdateModal(true);
setUpdateTaskTitle(item.name);
}}>
<Text
style={{
color: colors.text,
marginLeft: 20,
marginRight: 20,
}}>
{item.name}
</Text>
</TouchableOpacity>
</View>
<View style={{flexDirection: 'row', marginTop: 10}}>
<Fontisto name="date" size={20} color={colors.text} />
<Text style={{marginLeft: 20, color: colors.text}}>{item.date}</Text>
</View>
<View
style={{
marginTop: 10,
flexDirection: 'row',
justifyContent: 'space-between',
}}>
<Feather
name={item.notification ? 'bell-off' : 'bell'}
size={20}
color={colors.text}
onPress={() => checkNotification(item.key)}
/>
<Fontisto
name="trash"
size={20}
color={colors.text}
onPress={() => {
setModalVisible(true);
setDetails(item);
}}
/>
</View>
</View>
);
};
return (
<View style={{flex: 1, backgroundColor: colors.background}}>
<Modal
hardwareAccelerated={true}
animationType="fade"
transparent={true}
visible={updateModal}
onRequestClose={() => {
setUpdateModal(!updateModal);
}}>
<View
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'rgba(0,0,0,0.8)',
}}>
<View
style={{
backgroundColor: colors.Modal,
padding: 35,
borderRadius: 10,
width: '80%',
height: '40%',
}}>
<View style={{}}>
<TextInput
style={{backgroundColor: colors.background, marginTop: 10}}
onChangeText={name => setUpdateTaskTitle(name)}
value={updateTaskTitle}
/>
</View>
<View
style={{
flexDirection: 'row',
justifyContent: 'space-evenly',
marginTop: 50,
}}>
<TouchableOpacity
onPress={() => {
setUpdateModal(false);
setUpdateTaskTitle('');
}}>
<Text>Close</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => {
setUpdateModal(false);
updateTodo(...todos, {name: updateTaskTitle});
setUpdateTaskTitle('');
console.log(updateTaskTitle);
}}>
<Text>Update</Text>
</TouchableOpacity>
</View>
</View>
</View>
</Modal>
<Modal
hardwareAccelerated={true}
animationType="fade"
transparent={true}
visible={modalVisible}
onRequestClose={() => {
setModalVisible(!modalVisible);
}}>
<View
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'rgba(0,0,0,0.8)',
}}>
<View
style={{
backgroundColor: colors.Modal,
padding: 35,
borderRadius: 10,
width: '80%',
height: '40%',
}}>
<View>
<Text style={{fontSize: 20, color: colors.text}}>Delete?</Text>
</View>
<View
style={{
flexDirection: 'row',
marginTop: 15,
}}>
<Text style={{color: colors.text}}>Completed: </Text>
<Fontisto
style={{marginLeft: 20}}
name={
details.isChecked ? 'checkbox-active' : 'checkbox-passive'
}
size={15}
color={colors.text}
/>
</View>
<View style={{flexDirection: 'row', marginTop: 20}}>
<Text style={{color: colors.text}}>Title: </Text>
<Text
numberOfLines={1}
style={{marginLeft: 15, marginRight: 15, color: colors.text}}>
{details.name}
</Text>
</View>
<Text style={{marginTop: 20, color: colors.text}}>
Created: {details.date}
</Text>
<View
style={{
flexDirection: 'row',
justifyContent: 'space-evenly',
marginTop: 30,
}}>
<TouchableOpacity
onPress={() => {
setModalVisible(false);
setDetails('');
}}>
<Text style={{color: colors.text}}>Close</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => {
deleteTodo(details.key);
setModalVisible(false);
setDetails('');
}}>
<Text style={{color: colors.text}}>Delete</Text>
</TouchableOpacity>
</View>
</View>
</View>
</Modal>
<View
style={{
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
padding: 20,
backgroundColor: colors.Textinput,
elevation: 12,
}}>
<TextInput
style={{
flex: 1,
backgroundColor: '#fff',
borderTopLeftRadius: 5,
borderBottomLeftRadius: 5,
}}
placeholder="What Tododay?"
placeholderTextColor="#000"
onChangeText={value => setTitle(value)}
value={title}
autoCapitalize="words"
/>
<Entypo
style={{
marginLeft: 1,
padding: 13,
backgroundColor: '#fff',
height: 49,
borderTopRightRadius: 5,
borderBottomRightRadius: 5,
}}
name="add-to-list"
size={25}
color="#000"
onPress={() => addTodo()}
/>
</View>
<View style={{flex: 1}}>
<FlatList
data={todos}
renderItem={renderitem}
ListEmptyComponent={emptyListComponent}
/>
</View>
</View>
);
}
导出默认函数App（）{
const[updateTaskId，setUpdateTaskId]=useState（“”）；
const[updateTaskTitle，setUpdateTaskTitle]=useState（“”）；
const[todos，setTodos]=useState（[]）；
const updateTodo=（）=>{
常数todoAsync=[
……待办事项，
{
关键字：updateTaskId，
名称：updateTaskTitle，
},
];
setTodos（todoAsync）；
};
常量renderitem=（{item}）=>{
返回(
checkTodo（item.key）}
/>
{
setUpdateModal（真）；
setUpdateTaskTitle（项目名称）；
}}>
{item.name}
{item.date}
检查通知（item.key）}
/>
{
setModalVisible（真）；
设置详细信息（项目）；
}}
/>
);
};
返回(
{
setUpdateModal（！updateModal）；
}}>
setUpdateTaskTitle（名称）}
值={updateTaskTitle}
/>
{
设置日期模式（假）；
setUpdateTaskTitle（“”）；
}}>
接近
{
设置日期模式（假）；
updateTodo（…todos，{name:updateTaskTitle}）；
setUpdateTaskTitle（“”）；
console.log（updateTaskTitle）；
}}>
更新
{
setModalVisible（！modalVisible）；
}}>
删除？
完整的：
标题：
{details.name}
已创建：{details.date}
{
setModalVisible（假）；
设置详细信息（“”）；
}}>
接近
{
deleteTodo（details.key）；
setModalVisible（假）；
设置详细信息（“”）；
}}>
删除
setTitle（值）}
值={title}
autoCapitalize=“words”
/>
addTodo（）}
/>
);
}
const updateTodo = () => {
const todoAsync = [
...todos,
].map((item) => {
const { key } = item;
if(key === updateTaskId} {
// return updated object
return {
key,
name: updateTaskTitle,
}
}
else return item;
}
setTodos(todoAsync);
};
在其他相关函数中，您设置并存储TODO，但在update中，您仅设置TODO。这可能是问题的一部分吗？@kristinalustig我的意思是文本仍会更新，不是吗？更新的文本不会替换旧文本。我可以在console.log中看到更新的文本，因此我认为updateTodo函数是错误的，这是错误的
updateTodo（…todos，{name:updateTaskTitle}）updateTodo（updateTaskTitle，{name:updateTaskTitle}）时它只是添加了另一个具有相同id但具有更新文本的todo：lOH wait，您使用的代码与添加todo的代码相同。我认为您需要搜索现有的TODO以找到具有正确id的TODO，并适当地设置名称。现在您只是在末尾添加一个新的它仍然添加具有相同id但具有更新文本的新todo。更新todo时，您需要知道要更新的todo的id。这样，您就可以将其从数组中删除，然后用更新后的名称追加一个新的todo。当我按下“更新”按钮时，它只是添加了一个具有相同id但具有更新文本的新todo。@Lmao12233请查看更新的答案
const updateTodo = () => {
const todoAsync = [
...todos,
].map((item) => {
const { key } = item;
if(key === updateTaskId} {
// return updated object
return {
key,
name: updateTaskTitle,
}
}
else return item;
}
setTodos(todoAsync);
};