为什么我的 React bootstrap 表单不呈现传递给属性的值？

Question

我正在使用 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 */}

"Input" 组件 (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="">

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

Answer 1

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

为什么我的 React bootstrap 表单不呈现传递给属性的值？

Why isn't my React bootstrap form rendering the values passed to the attributes?

reactjs

forms

bootstrap-4

form-control

formgroups