redux-form 字段值是否可以保存对象而不仅仅是字符串? [英] Does redux-form field value can hold object instead of just a string?

问题描述

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

考虑以下示例

 class SelectQuestions 扩展组件{使成为(){const {fields:{question1,question2},handleSubmit}=this.props;返回 
<form onSubmit={handleSumbit(this.handleFunction.bind(this))}><SelectQuestion {...question1}/><SelectQuestion {...question1}/><button type="submit" className="btn btn-default">提交</button></表单>
}}类 SelectQuestion 扩展组件{使成为 (){<选择></选择>}}

'SelectQuestion' 接受问题数组，每个问题都有问题 ID 和问题名称.

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

解决方案

TL:DR

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

说明:

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

const myFancyQuestions = [{ id: 1, label: 'Why?', category: '问为什么' },{ id: 2, label: 'Who?', category: '问谁' },{ id: 3, label: 'When?', category: '询问什么时候' }];

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

然后在渲染中显示它:

class ObjectSelect 扩展 React.Component {使成为() {const { input, multiple, options, value, ...rest } = this.props;const 解析 = 事件 =>{//这就是 redux-form 将保存的内容:返回 JSON.parse(event.target.value);}返回 (<选择onBlur={事件=>input.onBlur(parse(event))}onChange={event =>input.onChange(parse(event))}{...休息}>{options.map(option =><option key={option.id}值={JSON.stringify(option)}selected={input.value.id == option.id}>{option.label}</option>)}</选择>)}}

Does redux-form field value can hold object instead of just a string?

Consider following example

    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' takes array of Questions, each Question has question id and question name.

Once the user selects the question I wanted to to return QuesionId and QuesitonName. How it can be achieved using redux-form in react

解决方案

TL:DR

Yes it can hold an object. Check out this example: https://codesandbox.io/s/vq6k6195rl

Explanation:

For a select, you can define your selects like this:

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

Then wrap your component with Field component.

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

And then just show it in your render:

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>
    )
  }
}

这篇关于redux-form 字段值是否可以保存对象而不仅仅是字符串?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！