使用redux-form检索选择值

时间:2017-03-16 22:13:21

标签: reactjs redux react-redux redux-form

我是一个初学者,所以不要被我的问题所冒犯,这一定是愚蠢的事情,但我已经被困了2天,尝试了很多我在搜索时找到的东西。

我的问题很简单,我使用React和redux与redux-form库。我的表单非常简单,适用于所有领域,除了...我的组合框我没有设法检索任何数据。就像我的Field select组件在我的反应组件中看不到,它似乎对其状态等没有反应。

这是我的代码(3个不同的文件):

共享实用程序功能文件

MailItem.PropertyAccessor

组件的容器

    Dim start As String
    Dim Sale As String
    Dim Receipt As String
    Dim endProgram As String
    Dim StockOrder As New list(Of String)



    Console.WriteLine("Welcome, Let's start today's sales")
    Console.WriteLine()
    Console.WriteLine("please type 'Yes' or 'No', Yes to Start and No to Stop")
    start = Console.ReadLine()

    Do
        If (start = "Yes") Then
            Console.WriteLine("What have you sold today? and for how much? and Please input Code on the side of the item")
            Sale = Console.ReadLine
            StockOrder.Add(Console.ReadLine)


            Console.Clear()
            Console.WriteLine()
            Console.WriteLine("Customer Receipt")
            Console.WriteLine()
            Console.WriteLine(Sale)
            Console.WriteLine()
            Console.WriteLine("Dear customer thank you for shopping with us, we appreciated your custom. please note that we have a 14 day return policy in which you can return faulty or unused and unopened items, if any product is returned without any fault please know that a 25% handling fee may apply, for any repair you have a three month warranty, this warranty only includes fault with the item replaced and any additional faults that occur will not be our responsibility.")
            Receipt = Console.ReadLine

            Console.Clear()
            Console.WriteLine()
            Console.WriteLine()
            Console.WriteLine("Would You Like to Continue?")
            start = Console.ReadLine

            If (start = "No") Then
                Console.Clear()
                Console.WriteLine("Stock Order and Sales Sheet")
                Console.WriteLine()


                Console.Write(String.Join(Environment.NewLine, StockOrder))

                For i = 0 To StockOrder.Count - 1
                    Console.WriteLine(StockOrder(i))
                Next

            End If

        ElseIf (start = "No") Then

            Console.WriteLine("Since you don't want to use the program nothing else will be ordered in the stock order")

            Console.WriteLine("Thank you for using this program")
            endProgram = Console.ReadLine
            End
        End If
    Loop

End Sub

表单

export const renderSelectField = (field) => {
  var styles = {};
  var containerStyle = getInputStylesContainer();

  if (field.input.value || field.meta.touched) {
    if (!field.meta.error) {
      styles = getInputStylesSuccess();
      containerStyle = classNames(containerStyle, {'has-success': true});
    } else {
      styles = getInputStylesError();
      containerStyle = classNames(containerStyle, {'has-error': true});
    }
  }

  return (<div className={containerStyle}>
    {displayInputLabel(styles.idInput, field.label)}
    <select className='form-control' name={field.input.name} id={styles.idInput} aria-describedby={styles.ariaDescribedBy}>
      {field.options}
    </select>
    <span className={styles.glyphicon} aria-hidden='true' />
    {field.meta.touched && field.meta.error &&
    displayErrorMessage(field.meta.error)}
  </div>);
};

非常感谢你的帮助,我感到非常绝望(我觉得XD的通常感觉很棒)

1 个答案:

答案 0 :(得分:1)

您的问题很简单,您不会将任何内容绑定到onChange元素的select处理程序。通常,您只需the onChange function provided as a prop by redux-form through the Field component

您可以执行以下操作(删除代码以显示牛肉):

export const renderSelectField = (field) => {
  // *snip snip*
  return (
    <div className={containerStyle}>
      {displayInputLabel(styles.idInput, field.label)}
      <select className='form-control' name={field.input.name} 
        id={styles.idInput} aria-describedby={styles.ariaDescribedBy} 
        onChange={field.input.onChange}>
        {field.options}
      </select>
      <span className={styles.glyphicon} aria-hidden='true' />
      {field.meta.touched && field.meta.error &&
    displayErrorMessage(field.meta.error)}
    </div>);
};

希望这有帮助!