因此,我尝试使用2个TextInput,1个onPress,然后使用React Redux显示2个字符串或值。我已经尝试过了,但是只显示1个值/字符串。我不知道这在React Redux上不可用吗?请检查我的代码。谢谢!
这是我的代码:
EventInput.js:
state = {
eventName: "",
eventDescription: ""
};
eventChangedHandler = (val) => {
this.setState({
eventName: val,
});
};
eventDescriptionHandler = (lol) => {
this.setState({
eventDescription: lol
});
};
//For button also. In onPress
eventSubmitHandler = () => {
//This will not allow the user if they passed a empty string
if (this.state.eventName.trim() === "") {
return;
}
//We use props here because the function of this is in the EventCreator.js
this.props.onEventAdded(this.state.eventName);
};
eventDescriptionSubmitHandler = () => {
if(this.state.eventDescription.trim() === "") {
return;
}
this.props.onEventDescriptionAdded(this.state.eventDescription);
};
render () {
return (
<View style={styles.container}>
<View style={styles.inputAndButtonContainer}>
<TextInput
placeholder="Title of the Event..."
value={this.state.eventName}
onChangeText={this.eventChangedHandler}
style={styles.textInputContainer}
placeholderTextColor='black'
/>
<TextInput
placeholder="Description of the Event"
value={this.state.eventDescription}
onChangeText={this.eventDescriptionHandler}
style={styles.textInputContainer}
placeholderTextColor='black'
/>
<TouchableOpacity
style={styles.setLocationContainer}
onPress={this.props.onItemPressed}
>
<Text style={{fontWeight: 'bold', fontSize: 13, color: 'white'}}>
Set Location of the Event or Party
</Text>
</TouchableOpacity>
</View>
<View style={styles.buttonContainer}>
<TouchableOpacity onPress={(this.eventSubmitHandler, this.eventDescriptionSubmitHandler)}>
<View style={styles.button}>
<Text style={{color: 'black', fontSize: 20, fontWeight: 'bold'}}>Add</Text>
</View>
</TouchableOpacity>
</View>
</View>
);
}
EventCreator.js:
eventAddedHandler = eventName => {
this.props.onAddEvent(eventName);
};
eventDescriptionHandler = eventDescription => {
this.props.onAddEvent(eventDescription);
};
render() {
return(
<LinearGradient style={styles.linearGradient} colors={['#718792', '#1c313a', '#000a12']}>
<View>
<EventInput
onEventAdded={this.eventAddedHandler}
onEventDescriptionAdded={this.eventDescriptionHandler}
onItemPressed={this.openMapScreen}
/>
</View>
</LinearGradient>
);
}
const mapDispatchToProps = dispatch => {
return {
onAddEvent: (eventName, eventDescription) => dispatch(addEvent(eventName, eventDescription))
};
};
export default connect(null, mapDispatchToProps)(EventCreator);
这是我显示数据的代码:
EventList.js
const eventList = (props) => {
return (
<View>
<FlatList
style={styles.listContainer}
data={props.events}
ListHeaderComponent={this.renderHeader}
renderItem={(info) => (
<ListItem
eventName={info.item.name}
eventImage={info.item.image}
eventDescription={info.item.description}
onItemPressed={() => props.onItemSelected(info.item.key)}
/>
)}
/>
</View>
);
};
Home.js:
render() {
return(
<LinearGradient colors={['#718792', '#1c313a', '#000a12']} style={styles.linearGradient}>
<View style={styles.container}>
<EventList
events={this.props.events}
onItemSelected={this.itemSelectedHandler}
/>
</View>
</LinearGradient>
);
}
const mapStateToProps = state => {
return {
events: state.events.events
};
};
export default connect(mapStateToProps)(HomeScreen);
这是我的React Redux代码:
store / reducers / event.js:
const reducer = (state = initialState, action) => {
switch (action.type) {
case ADD_EVENT:
return {
...state,
events: state.events.concat({
key: `${Math.random()}`,
name: action.eventName,
description: action.eventDescription,
image: {
uri: "https://c1.staticflickr.com/5/4096/4744241983_34023bf303_b.jpg"
}
})
};
case DELETE_EVENT:
return {
...state,
events: state.events.filter(event => {
return event.key !== action.eventKey;
})
};
default:
return state;
}
};
如果需要,请询问更多信息和代码,谢谢!