我有<h1/>
和<input/>
元素,一旦输入文本,就会出现 <button/>
出现/渲染
最佳答案
虽然您可能需要根据整个 HTML 结构和 CSS 样式进行一些更改,但您可以这样做
<div style={{display: 'flex', flexDirection: 'column', alignItems: 'center'}}>
<div>
<h1>Do Not Move Me</h1>
<input
placeholder='Enter Name'
onChange={this._displayButton}
value={this.state.nameText}
/>
</div>
<div>
{this.state.textEntered ?
<button
type="submit"
/>
: null
}
</div>
</div>
我所做的主要更改是将flexDirection从row
更改为column
,这使得div子/子div出现在彼此下方出现在彼此身边。
编辑:
<div style={{display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'flex-start'}}>
添加了 justifyContent
属性。
编辑2:
<div style={{display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
<h1>Do Not Move Me</h1>
<div style={{ position: 'relative', marginLeft: 20 }}>
<input
placeholder='Enter Name'
onChange={this._displayButton}
value={this.state.nameText}
/>
{this.state.textEntered ?
<button type="submit" style={{ position: 'absolute', top: '-10px', right: '-10px', borderRadius: '50%', height: 40, width: 40, backgroundColor: '#881587', border: 'none' }} /> : null
}
</div>
</div>
您必须编辑按钮
样式,使其看起来像您想要的那样。
关于javascript - ReactJS:尽管渲染了新元素,如何将元素固定到当前位置?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39423965/