Я использую 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="">
Что еще мне нужно сделать, чтобы форма правильно отображалась?