0
私は反応ネイティブの初心者です。私の反応するネイティブプロジェクトでは、私はこのフロントエンドを持っています。ここ反応するネイティブとPHPを使用してデータベースから特定のデータを削除する方法
、これら全てのCIS、PSTおよび他のすべてのデータは、PHPファイルにJSONオブジェクトを作成して、データベースから検索されます。表示されているとおりにリストされています。写真でわかるように、データベーステーブルの各データに対して削除ボタンが追加されています。しかし、私はボタンにデータを指定することができなかったので、まだ削除ボタンに機能を追加できませんでした。私が望むのは、CISの前にある削除ボタンをクリックすると、CISの行だけが削除されます。 PSTの前にある削除ボタンをクリックすると、PST行だけを削除します。そのデータをボタンに指定して削除する方法。
これは私の反応するネイティブコードです。
import React, { Component } from 'react';
import { AppRegistry, Text, AsyncStorage, StyleSheet, TextInput, View, Alert, Button, FlatList, TouchableOpacity } from 'react-native';
class MainProject extends Component {
constructor(props) {
super(props)
this.state = {
name: ''
};
this.persistData = this.persistData.bind(this);
}
state = {
data: []
};
persistData() {
let name = this.state.name
AsyncStorage.setItem('name', name).done();
this.setState({ name: name, persistedName: name })
}
check() {
AsyncStorage.getItem('name').then((name) => {
this.setState({ name: name, persistedName: name })
})
}
componentWillMount() {
this.check();
//this.fetchData();
}
fetchData = async() => {
const response = await fetch('http:/192.168.182.131/test/select.php');
const json = await response.json();
this.setState({ data: json.results });
};
removeData = async() => {
const response = await fetch('http:/192.168.182.131/test/delete.php');
const json = await response.json();
this.setState({ data: json.results });
};
InsertDataToServer =() => {
const { name } = this.state;
fetch('http:/192.168.182.131/test/submit_user_info.php', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
name: name
})
}).then((response) => response.json())
.then((responseJson) => {
// Showing response message coming from the server after inserting records.
Alert.alert(responseJson);
}).catch((error) => {
console.error(error);
});
}
render() {
return (
<View style={styles.MainContainer}>
<TextInput
// Adding hint in Text Input using Place holder.
placeholder="Enter Name"
onChangeText={name => this.setState({ name })}
// Making the Under line Transparent.
underlineColorAndroid='transparent'
style={styles.TextInputStyleClass}
/>
<Button title="SUBMIT" onPress={this.InsertDataToServer} color="#2196F3" />
<Button title="VIEW ALL" onPress={this.fetchData} color="green" style={styles.ViewAll} />
<View>
<Text>STATE:</Text>
<Text>Name: {this.state.name}</Text>
</View>
<View style={styles.container}>
<FlatList
data={this.state.data}
keyExtractor={(x, i) => i}
renderItem={({ item }) =>
<View>
<View>
<Text>
{`${item.name}`}
</Text>
</View>
<View>
<TouchableOpacity onPress={this.removeData}>
<Text style={styles.button}>
DELETE
</Text>
</TouchableOpacity>
</View>
</View>
}
/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer: {
justifyContent: 'center',
flex: 1,
margin: 10
},
TextInputStyleClass: {
textAlign: 'center',
marginBottom: 7,
height: 40,
borderWidth: 1,
// Set border Hex Color Code Here.
borderColor: '#FF5722',
},
container: {
marginTop: 15,
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF'
},
ViewAll: {
marginTop: 50
},
button: {
borderColor: 'red',
backgroundColor: 'red',
width: 60,
textAlign: 'center',
borderRadius: 10,
color: 'white'
}
});
AppRegistry.registerComponent('albums',() => MainProject);
これは私のPHPコードで、データベースデータを使用してJSONオブジェクトを作成するためのコードです。
<?php
include 'DBConfig.php';
$con = mysqli_connect($HostName, $HostUser, $HostPass, $DatabaseName);
$query = "SELECT * FROM Department ORDER BY id ASC";
$res = mysqli_query($con,$query) or die("Query Not Executed " . mysqli_error($con));
$data = array();
while($rows = mysqli_fetch_assoc($res)) {
$data[] = $rows;
}
$write = json_encode(array('results' => $data));
echo $write;
mysqli_close($con);
?>
「http：/ 192.168.182.131」は有効なURLではありません。あなたは 'http：// 192.168.182.131'を意味しますか？ – DanielO
はい。それは私のバーチャルボックス内の私のlinuxのIPアドレスです。 –