[英]React - How do I display the first value of an array as the default value in a select form?
I am trying to display a property of the first object in an array as the default item.我试图将数组中第一个对象的属性显示为默认项。 When I attempt to submit my form at the moment I get a null value for the selection because I have not engaged it.
当我尝试提交我的表单时,我得到了一个空值,因为我没有使用它。 How would I make sure the value is present?
我将如何确保该值存在? I am using
react-bootstrap
.我正在使用
react-bootstrap
。 Below are the snippets of code representative of this issue:以下是代表此问题的代码片段:
Here is the focus, I'm not sure what to put in the value field.这是重点,我不确定在 value 字段中放什么。 What I want is to reference the
id
value and if there is only one item in my array I don't have to open the dropdown, the id will already be there:我想要的是引用
id
值,如果我的数组中只有一项,我不必打开下拉列表,id 已经在那里了:
<Form.Control as="select" value={WHAT DO I DO HERE??} onChange={props.handleCart}>
{props.carts.map((cart,i) => <option key={cart.id} value={cart.id}>{cart.cart_name</option>)})
</Form.Control>
Home.js主页.js
constructor() {
super();
this.state = {
myCarts = [
{'id':'1', 'cart_name': 'my cart 1'},
{'id':'2', 'cart_name': 'my cart 2'}
],
showMenu: false
}
}
...
Return
<Create
showMenu = {this.state.showMenu}
menuModalToggle={this.menuModalToggle}
carts = {this.state.carts}
/>
Create.js创建.js
const CreateMenuModal = (props) => {
console.log('props carts there?',props.carts);
return (
<Modal
//dialogClassName={classes.modal}
show={props.showMenu}
onHide={props.menuModalToggle}
>
<Modal.Header closeButton>
<Modal.Title>Create Menu</Modal.Title>
</Modal.Header>
<div style={{ textAlign: 'center', padding: 10 }}>
Fill out the following details to create menus for your cart. Once you create a menu you will have the option to add and remove items from that menu.
</div>
<Modal.Body>
<Form>
<Form.Group controlId="cart_check">
<Form.Label>Choose which cart this menu is for:</Form.Label>
<Form.Control as="select" value={WHAT DO I DO HERE??} onChange={props.handleCart}>
{props.carts.map((cart,i) => <option key={cart.id} value={cart.id}>{cart.cart_name}</option>)})
</Form.Control>
</Form.Group>
<Form.Group controlId="menu_name">
<Form.Label>Enter a name for your menu:</Form.Label>
<Form.Control
required placeholder="My Menu" name="menu_name" type="email" onChange={props.handleChange} value={props.menu_name}
/>
</Form.Group>
</Form>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={props.menuModalToggle}>Cancel</Button>
<Button variant="primary" onClick={props.createMenu}>Add Menu</Button>
</Modal.Footer>
</Modal>
)
}
Here is an example of the submit code for reference:以下是提交代码的示例以供参考:
//CREATE A MENU
createMenu = () => {
console.log('create menu with:', this.state.cart_id, this.state.menu_name);
this.setState({ showMenu: !this.state.showMenu, menuAdded: !this.state.menuAdded });
let sqlStamp = moment().utcOffset('-0400').format("YYYY-MM-DD HH:mm:ss").substr(0, 18) + '0';
fetch(
`${global.api}/addMenu?cart_id=${this.state.cart_id}&menu_name=${this.state.menu_name}&time_joined=${sqlStamp}`,
{ method: "POST" }
).catch((error) => {
console.log(error)
})
}
Can you try defaultValue form-control-props你可以试试 defaultValue form-control-props
<Form.Control
as="select"
value={props.carts[0].id.toString()}
defaultValue={props.carts[0].id.toString()}
onChange={props.handleCart}
>
{props.carts.map((cart,i) => (
<option key={cart.id} value={cart.id}>
{cart.cart_name}
</option>
))}
</Form.Control>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.