Не удается заставить редукционную форму 6.0.2 работать с реактивной версией 0.32.0

Я пытался заставить редукционную форму работать с реакцией, но не могу заставить работать простейшую форму.

У меня есть 2 проблемы:

  1. Если я привяжу props.input к компоненту TextInput, каждое нажатие клавиши будет съедено. Вы видите напечатанный символ на короткое время, и он исчезает. Путем проб и ошибок я обнаружил, что если вы не привязываете props.input.value, это позволит полю отображать символы, которые вы вводите.

  2. Моей функции отправки всегда передается аргумент с пустыми значениями.

// @flow
import React, { PropTypes } from 'react'
import {
  StyleSheet,
  Text,
  TextInput,
  TouchableHighlight,
  View,
} from 'react-native'
import { reduxForm, Field } from 'redux-form'

const styles = StyleSheet.create({
  form: {
    flex: 1,
    flexDirection: 'column',
    paddingLeft: 16,
    paddingRight: 16,
  },
  submitbutton: {
    height: 48,
    marginTop: 32,
  },
  textfield: {
    height: 28,
  },
});

class TextInputField extends React.Component {

  render() {
    const { input, placeholder, style, input: { onChange } } = this.props
    console.log(this.props)
    return (
      <TextInput
        onChange={onChange}
        placeholder={placeholder}
        style={style}
      />
    )
  }
}

class SigninScene extends React.Component {

  render() {
    const { handleSubmit, submitting } = this.props
    return (
      <View style={styles.form}>
        <Field name="email" component={TextInputField} placeholder="email" style={styles.textfield}/>
        <Field name="password" component={TextInputField} placeholder="password" style={styles.textfield}/>
        <TouchableHighlight
          onPress={handleSubmit((values, dispatch, props) => {
            console.log("handling submit")
            console.log(values)
          })}
        >
          <Text style={styles.submitbutton}>Signin</Text>
        </TouchableHighlight>
      </View>
    )
  }
}

export default reduxForm({ form: 'signin' })(SigninScene)

react-native redux-form
person Julian Paas    schedule 05.09.2016    source источник
comment
Вы используете Immutable.js? Я видел такое поведение, когда случайно импортировал Field из redux-form вместо redux-form/immutable   -  person sfridman    schedule 14.09.2016
comment
Ебена мать! Вот и все! Я забыл, что добавил его в package.json. Как только я изменил импорт, он работает отлично. Спасибо!   -  person Julian Paas    schedule 15.09.2016
comment
???? Эти коварные скрытые предположения -_-   -  person sfridman    schedule 15.09.2016
comment
Привет, @JulianPaas, у меня такая же проблема, и я пытаюсь понять это уже несколько часов. В любом случае, вы могли бы поделиться своим рабочим кодом? Был бы очень признателен   -  person prgrmr    schedule 17.02.2017

Ответы (4)


arrow_upward
1
arrow_downward

Ну, во-первых, вы не можете выполнять такие деструктурирующие задания:

const { input, placeholder, style, input: { onChange } } = this.props

Насколько я понимаю, первый input съедает содержимое input, так что onChange ни на что не равняется. Пытаться

const { input, placeholder, style } = this.props

а потом

<TextInput
    onChange={input.onChange} // <-----
    placeholder={placeholder}
    style={style}
person Erik R.    schedule 06.09.2016
comment
Это не похоже на правду. Эта деструктуризация правильно устанавливает как входные, так и переменные onChange. Но я все равно пробовал это только с onChange, и это не дало никаких других результатов. - person Julian Paas; 08.09.2016

arrow_upward
0
arrow_downward

Основываясь на этой проблеме в репозитории Github в форме редуктора, я немного обновил код, но все еще не могу заставить его работать.

https://github.com/erikras/redux-form/issues/1668

// @flow
import React, { PropTypes } from 'react'
import {
  StyleSheet,
  Text,
  TextInput,
  TouchableHighlight,
  View,
} from 'react-native'
import { reduxForm, Field, formValueSelector } from 'redux-form'
import { connect } from 'react-redux'

const styles = StyleSheet.create({
  form: {
    flex: 1,
    flexDirection: 'column',
    paddingLeft: 16,
    paddingRight: 16,
  },
  submitbutton: {
    height: 48,
    marginTop: 32,
  },
  textfield: {
    height: 28,  // have to do it on iOS
    marginTop: 32,
  },
});

class TextInputField extends React.Component {

  render() {
    const { input: { onChange, value }, ...otherProps } = this.props
    console.log(this.props)
    return (
      <TextInput
        onChangeText={(value) => onChange(value)}
        value={value}
        {...otherProps}
      />
    )
  }
}

class SigninScene extends React.Component {

  render() {
    console.log(this.props)
    const { handleSubmit, submitting } = this.props
    return (
      <View style={styles.form}>
        <Field name="email" component={TextInputField} placeholder="email" style={styles.textfield}/>
        <Field name="password" component={TextInputField} placeholder="password" style={styles.textfield}/>
        <TouchableHighlight
          onPress={handleSubmit((values, dispatch, props) => {
            console.log("handling submit")
            console.log(values)
          })}
        >
          <Text style={styles.submitbutton}>Signin</Text>
        </TouchableHighlight>
      </View>
    )
  }
}

SigninScene = reduxForm({
    form: 'signin'
})(SigninScene)

const selector = formValueSelector('signin');

function mapStateToProps(state){
    return {
        email: selector(state, 'email'),
        password: selector(state, 'password'),
    }
}

SigninScene = connect(mapStateToProps)(SigninScene)

export default SigninScene
person Julian Paas    schedule 12.09.2016

arrow_upward
0
arrow_downward

Вместо того, чтобы сопоставлять значения полей с состоянием, попробуйте это.

const mapStateToprops = (state: State) => ({
});

export default reduxForm({
  form: 'signin'
})(
  connect(mapStateToprops)(SigninScene)
);
person sean    schedule 12.09.2016
comment
Я предполагаю, что это должно было помочь решить проблему получения значений при отправке? Впрочем, это не имело никакого значения. - person Julian Paas; 15.09.2016

arrow_upward
0
arrow_downward

У меня есть исходное приложение с открытым исходным кодом, отвечающее нативное стартовое приложение с избыточной формой, если у вас все еще есть вопросы, не стесняйтесь спрашивать меня.

https://github.com/DimitriMikadze/firebase-react-native-redux-starter

person Dimi Mikadze    schedule 13.02.2017