为什么我的 React bootstrap 表单不呈现传递给属性的值?
Why isn't my React bootstrap form rendering the values passed to the attributes?
我正在使用 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="">
我还需要做什么才能正确呈现表单?
在您的输入组件中,由于引号,您将字符串作为值传递给 'type' 和 'placeholder'。
将 type="{props.type}"
替换为 type={props.type}
等
我正在使用 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="">
我还需要做什么才能正确呈现表单?
在您的输入组件中,由于引号,您将字符串作为值传递给 'type' 和 'placeholder'。
将 type="{props.type}"
替换为 type={props.type}
等