所以我只是在文本字段中键入1个键后出现问题,文本字段正在重新渲染并失去焦点。
以下是一些代码片段,如果您需要更多代码请不要犹豫:
这是DiaryInput组件:
const DiaryInput = ({label, value, onChangeText, placeholder, secureTextEntry, autoCorrect, autoCapitalize}) => {
const {inputStyle, labelStyle, containerStyle} = styles;
return (
<View style={containerStyle}>
<Text style={labelStyle}>
{label}
</Text>
<TextInput
secureTextEntry={secureTextEntry}
placeholder={placeholder}
autoCorrect={autoCorrect}
autoCapitalize={autoCapitalize}
style={[inputStyle, {height: Platform.OS === 'android' ? 50 : 25}]}
value={value}
onChangeText={onChangeText}
keyboardType={'numeric'}
/*editable={false}*//>
</View>
)};
这里我使用的是Component(在render()中):
import React, {Component} from 'react';
import {ScrollView} from 'react-native';
import {DiaryInput} from "../DiaryInput";
import {DiarySlider} from "../DiarySlider";
import DiaryHeader from "../DiaryHeader";
import {TextArea} from "../common/TextArea";
import {connect} from 'react-redux';
import {
carbsChanged,
fatsChanged,
proteinChanged,
dailyWeightChanged,
hoursSleepChanged,
feelLevelChanged,
wodChanged,
notesChanged,
journalChanged,
dateChangedLeft,
dateChangedRight,
getDiaryInfo,
saveDiaryInfo
} from "../../actions/DiaryActions";
class DiaryPage extends Component {
componentWillMount() {
// this.props.getDiaryInfo();
// this.state.currentDateString = dateString;
this.props.currentDate = new Date();
}
onCarbsChanged(text) {
this.props.carbsChanged(text);
}
onFatsChanged(text) {
this.props.fatsChanged(text);
}
onProteinChanged(text) {
this.props.proteinChanged(text);
}
onDailyWeightChanged(text) {
this.props.dailyWeightChanged(text);
}
onHoursSleepChanged(text) {
this.props.hoursSleepChanged(text);
}
onFeelLevelChanged(value) {
this.props.feelLevelChanged(value);
}
onWODChanged(text) {
this.props.wodChanged(text);
}
onNotesChanged(text) {
this.props.notesChanged(text);
}
onJournalChanged(text) {
this.props.journalChanged(text);
}
onRightChanged(date) {
this.props.dateChangedRight(date);
}
onLeftChanged(date) {
this.props.dateChangedLeft(date);
}
render() {
return (
<ScrollView>
<DiaryHeader
text={this.props.currentDate.toLocaleString("en-US")}
onLeft={this.onLeftChanged(this.props.currentDate)}
onRight={this.onRightChanged(this.props.currentDate)}/>
<DiaryInput
label={"Carbs"}
value={this.props.carbs}
onChangeText={this.onCarbsChanged.bind(this)}/>
<DiaryInput
label={"Fat"}
value={this.props.fats}
onChangeText={this.onFatsChanged.bind(this)}/>
<DiaryInput
label={"Protein"}
value={this.props.proteins}
onChangeText={this.onProteinChanged.bind(this)}/>
<DiaryInput
label={"Daily Weight"}
value={this.props.dailyWeight}
onChangeText={this.onDailyWeightChanged.bind(this)}/>
<DiaryInput
label={"Hours Sleep"}
value={this.props.hoursSleep}
onChangeText={this.onHoursSleepChanged.bind(this)}/>
<DiarySlider
label={"Feel Level"}
value={this.props.feelLevel}
onChangeText={this.onFeelLevelChanged.bind(this)}/>
<TextArea
label={"WOD"}
value={this.props.wod}
onChangeText={this.onWODChanged.bind(this)}/>
<TextArea
label={"Notes"}
value={this.props.notes}
onChangeText={this.onNotesChanged.bind(this)}/>
<TextArea
label={"Journal"}
value={this.props.journal}
onChangeText={this.onJournalChanged.bind(this)}/>
</ScrollView>
)
}
}
function mapStateToProps({diary}) {
const {carbs, fats, proteins, dailyWeight, hoursSleep, feelLevel, wod, notes, journal, currentDate} = diary;
return {carbs, fats, proteins, dailyWeight, hoursSleep, feelLevel, wod, notes, journal, currentDate};
}
export default connect(mapStateToProps, {
carbsChanged,
fatsChanged,
proteinChanged,
dailyWeightChanged,
hoursSleepChanged,
feelLevelChanged,
wodChanged,
notesChanged,
journalChanged,
dateChangedLeft,
dateChangedRight,
getDiaryInfo,
saveDiaryInfo
})(DiaryPage);
这里我有文本更改时的功能:
onHoursSleepChanged(text) {
this.props.hoursSleepChanged(text);
}
行动:
export const hoursSleepChanged = (text) => {
return {
type: HOURS_SLEEP_CHANGED,
payload: text
}};
减速机:
case HOURS_SLEEP_CHANGED:
return {...state, hoursSleep: action.payload};
而且我认为只需要......
动作和减速器工作正常......只需一次按键后输入就会失去焦点......
如果您对此有所了解,请告诉我。我一直在努力找到原因。
谢谢!