Question

处理设置安全问题的部分验证。服务器以数组的形式响应20个左右的问题列表。我可以获取表单并选择要渲染的框，但通过指定索引一次只能选择一个选项。

如果我尝试发送整个数组，则会出现undefined错误。试图在`中迭代每个索引进行for loop，这会产生错误。

我试图找出如何传递整个数组，以便为数组中的每个条目生成option。

这是我到目前为止所做的：

// ./set_security_questions.js

 // This renders errors regarding the form inputs
renderField(field) {
    const { 
        label,
        placeholder,
        type,
        name,
        questions,
        meta: {
            touched, 
            error 
        } 
    } = field;

    return (
        <div className='form-group'>
            <label>{label}</label>
            <select className='form-control' name={name}>
                 <option value={questions}>{questions}
                 </option>}
            </select>
            <input 
                className='form-control' 
                type={type}
                placeholder={placeholder}
                {...field.input} 
            />
            <div className='text-danger'>
                {touched ? error : ""}
            </div>
        </div>
    );
}


// The main body to be rendered
render() {
    if (this.props.permitRender) {
        const { handleSubmit } = this.props;
        return (
            <div>

                <h3>Set Security Questions</h3>
                <p>Please select two security questions that will be easy for you to remember.</p>

                <form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
                    {this.renderAlert()}

                    <Field
                        questions={this.props.questions.data.security_question}
                        label='Question 1'
                        placeholder='Answer 1'
                        name='a1'
                        type='text'
                        component={this.renderField} 
                    />

                    <Field
                        label='Question 2'
                        placeholder='Answer 2'
                        name='a2'
                        type='text'
                        component={this.renderField} 
                    />
                    <button type="submit" className="btn btn-primary">Submit</button>
                </form>
            </div>
        );            
    } else if (!this.props.permitRender) {
        return ( 
            <div> { this.renderAlert() } </div>
        );
    } 
}

另外，我从服务器返回的JSON看起来很奇怪，所以我需要解决这个问题，但仍然想知道如何将数组传递给Form。 this.props.questions.data：

 data:
    id: 123
    key: "key_request"
    security_q1: null
    security_q2: null
    security_question: Array(29) 
        0: {security_question: "In what city or town did you meet your spouse / partner?"}
        1: {security_question: "In what city or town did your mother and father meet?"}
        2: {security_question: "In what town or city was your first full time job?"}
        3: {security_question: "What is the first name of your spouse's father?"}
        ......

Answer 1

这是我目前用来填充一组复选框的示例。复选框组件中没有任何特殊逻辑，我只是使用自定义html进行样式设置。

这是我的数据，一个简单的数组：

const env = {
  FONT_FORMATS: ['OTF', 'TTF', 'WOFF', 'WOFF2']
}

这是我的组件的render（）函数中的代码。我将每个项目存储在对象键下的Redux表单中 - ＆gt;文件类型。

<ul className='tags'>
    {envConfig.FONT_FORMATS.map((tag: string) => (
      <Field
        key={tag}
        value={tag}
        name={`fileTypes.[${tag}]`}
        id={tag.toLowerCase().replace(' ', '_')}
        type='checkbox'
        component={checkBox}
        label={tag}
      />
    ))}
  </ul>

我希望这会帮助你！

将数组发送到Redux表单以在选择下拉列表中生成选项

1 个答案: