按键后反应本机输入丢失焦点

时间:2017-11-25 02:50:30

标签: reactjs react-native input redux react-router

所以我只是在文本字段中键入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};

而且我认为只需要......

动作和减速器工作正常......只需一次按键后输入就会失去焦点......

如果您对此有所了解,请告诉我。我一直在努力找到原因。

谢谢!

0 个答案:

没有答案