React Native-2 TextInput,1 onPress,并显示2个字符串

时间:2019-06-03 08:15:28

标签: javascript arrays react-native redux react-redux

因此,我尝试使用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;
}
};
  

如果需要,请询问更多信息和代码,谢谢!

0 个答案:

没有答案