为什么我的 React 引导表单不呈现传递给属性的值？答案

【问题标题】：Why isn't my React bootstrap form rendering the values passed to the attributes?为什么我的 React 引导表单不呈现传递给属性的值？
【发布时间】：2020-07-03 11:06:00
【问题描述】：

我正在使用 React 16.12.0。我想使用 bootstrap (v 4.4.0) 来构造表单元素和样式。我已经创建了这个表单容器组件，src/containers/FormContainer.jsx：

import React, {Component} from 'react';
import {FormControl, FormGroup} from 'react-bootstrap';
   ...
  render() {
    return (
        <form className="container-fluid" onSubmit={this.handleFormSubmit}>
            <FormGroup
                controlId="formBasicText">

                <Input inputType={'text'}
                   title= {'Name'}
                   name= {'name'}
                   value={this.state.newCoop.name}
                   placeholder = {'Enter cooperative name'}
                   handleChange = {this.handleInput}

                   /> {/* Name of the cooperative */}

“输入”组件（src/components/Input.jsx）有这个来源...

import React from 'react';
import {FormControl, FormLabel} from 'react-bootstrap';

const Input = (props) => {
    return (
  <div>
      <FormLabel>{props.name}</FormLabel>
      <FormControl
            type="{props.type}"
            id={props.name}
            name={props.name}
            value={props.value}
            placeholder="{props.placeholder}"
            onChange={props.handleChange}
          />
  </div>
    )
}

export default Input;

问题是，当我的表单被渲染时，我的组件中的值没有被评估。我希望“{props.name}”被评估为“name”，但相反，它被呈现为“{props.name}”。这是生成的 HTML ...

<input name="name" placeholder="{props.placeholder}" type="{props.type}" id="name" class="form-control" value="">

我还需要做什么才能使表单正确呈现？

【问题讨论】：

标签： reactjs forms bootstrap-4 form-control formgroups

【解决方案1】：

在您的输入组件中，由于引号，您将字符串作为值传递给“类型”和“占位符”。将type="{props.type}" 替换为type={props.type} 等。

【讨论】：