问题描述
我是新来的反应者,我试图将DropDownButton(位置)和TextInput(小时)(Refer to here) 对齐到一个单元格中的同一行,而不创建新列。有没有一种方法可以在不更改表结构的情况下进行操作?谢谢!
这是我的代码。
<td>
<DropdownButton
id="dropdown-basic-button"
title={item.position}
type='button'
>
<Dropdown.Item as='button' type='button'><div onClick={(e) => this.handleChangeEC(e.target.textContent,item,'position')}>Position</div></Dropdown.Item>
<Dropdown.Item as='button' type='button'><div onClick={(e) => this.handleChangeEC(e.target.textContent,'position')}>PM</div></Dropdown.Item>
<Dropdown.Item as='button' type='button'><div onClick={(e) => this.handleChangeEC(e.target.textContent,'position')}>SA</div></Dropdown.Item>
<Dropdown.Item as='button' type='button'><div onClick={(e) => this.handleChangeEC(e.target.textContent,'position')}>AP</div></Dropdown.Item>
<Dropdown.Item as='button' type='button'><div onClick={(e) => this.handleChangeEC(e.target.textContent,'position')}>P</div></Dropdown.Item>
</DropdownButton>
<input
type="number"
name="workingHour"
value={item.workingHour}
onChange={(e) => this.handleChangeTM(e.target.value,e.target.name)}
className="form-control"
placeholder='Hour'
min='1'
/>
</td>
解决方法
添加标签<div className='input-group>
来包装所有内容。
<td>
**<div className='input-group'>**
<DropdownButton
id="dropdown-basic-button"
title={item.position}
type='button'
>
<Dropdown.Item as='button' type='button'><div onClick={(e) => this.handleChangeEC(e.target.textContent,item,'position')}>Position</div></Dropdown.Item>
<Dropdown.Item as='button' type='button'><div onClick={(e) => this.handleChangeEC(e.target.textContent,'position')}>PM</div></Dropdown.Item>
<Dropdown.Item as='button' type='button'><div onClick={(e) => this.handleChangeEC(e.target.textContent,'position')}>SA</div></Dropdown.Item>
<Dropdown.Item as='button' type='button'><div onClick={(e) => this.handleChangeEC(e.target.textContent,'position')}>AP</div></Dropdown.Item>
<Dropdown.Item as='button' type='button'><div onClick={(e) => this.handleChangeEC(e.target.textContent,'position')}>P</div></Dropdown.Item>
</DropdownButton>
<input
type="number"
name="workingHour"
value={item.workingHour}
onChange={(e) => this.handleChangeTM(e.target.value,e.target.name)}
className="form-control"
placeholder='Hour'
min='1'
/>
**</div>**
</td>