8

redux-form 字段值是否可以保存对象而不仅仅是一个字符串？

考虑以下示例

    class SelectQuestions extends Component{
          render(){
    const {fields:{question1,question2},handleSubmit}=this.props;
    return <div>
    <form onSubmit={handleSumbit(this.handleFunction.bind(this))}>
        <SelectQuestion {...question1}/>
        <SelectQuestion {...question1}/>
       <button type="submit" className="btn btn-default">Submit</button>
    </form>
    </div>
    }
    }
class SelectQuestion extends Component{

render (){

 <select></select> 
}    

}

'SelectQuestion' 接受一系列问题，每个问题都有问题 ID 和问题名称。

一旦用户选择了我想要返回的问题，则返回 QuesionId 和 QuesitonName。如何在 react 中使用 redux-form 来实现

4

5 回答 5

7

TL:博士

是的，它可以容纳一个物体。看看这个例子： https ://codesandbox.io/s/vq6k6195rl

解释：

对于选择，您可以像这样定义您的选择：

const myFancyQuestions = [
  { id: 1, label: 'Why?', category: 'Asking why' },
  { id: 2, label: 'Who?', category: 'Asking who' },
  { id: 3, label: 'When?', category: 'Asking when' }
];

然后用 Field 组件包装你的组件。

<Field component={ObjectSelect} name="myFancySelect" options={myFancyQuestions}/>

然后在你的渲染中显示它：

class ObjectSelect extends React.Component {
  render() {
    const { input, multiple, options, value, ...rest } = this.props;
    const parse = event => {
      // This is what redux-form will hold:
      return JSON.parse(event.target.value);
    }
    return (
      <select
        onBlur={event => input.onBlur(parse(event))}
        onChange={event => input.onChange(parse(event))}
        {...rest}>
          {options.map(option =>
            <option key={option.id} 
                    value={JSON.stringify(option)} 
                    selected={input.value.id == option.id}>
              {option.label}
            </option>)}
      </select>
    )
  }
}
于 2017-09-08T13:23:07.613 回答
5

是的，该值可以是一个复杂的对象。甚至还有一个例子来证明它。

复杂值示例

于 2016-04-30T20:43:40.907 回答
0

这很简单，您只需添加“.value”（或其他任何内容..）来命名 prop，它将创建对象并在更改时更新其中的值...

<Field name="companyName.value"  placeholder="Name of the Company" component={ReduxFormTextInput} />

你会得到对象：

companyName: {
value:"<inputted string>"
}
于 2020-06-23T16:01:32.950 回答
0

这有点晚了，但仍然..

是的，它可以！您可以在此处简单地使用FormSection。

它会将您的表单拆分为引擎盖下的对象，并将所有部分单独保存在您的单个表单对象中。

只需将一个name道具传递给 FormSection，这将是您的子对象的名称。

import { FormSection } from 'redux-form';

render(){
  return(
      <form onSubmit={...}>
        <FormSection name="firstGroup">
            <SelectQuestion {...question1}/>
        </FormSection>

        <FormSection name="secondGroup">
            <SelectQuestion {...question1}/>
        </FormSection>
       <button type="submit" className="btn btn-default">Submit</button>
      </form>
  )
}

然后通过 Redux devTools 检查你的表单结构。

享受 ;）

于 2018-03-23T13:20:39.763 回答
0

我认为实现这一目标的更好方法是创建两个虚拟字段selectedQuestionId和selectedQuestionName. 这些字段不会显示。然后，每个都SelectQuestion可以触发回调，例如：

setSelectedQuestion = (event) => {
  var questionName = event.target.name; //or something like that
  var questionId = event.target.id; //or something like that
  this.props.fields.selectedQuestionName.onChange(questionName );
  this.props.fields.selectedQuestionId.onChange(questionId );
}

onChange可以在 redux-form 字段上调用以编程方式设置值。

于 2016-04-28T13:28:34.973 回答