ReactJS：尽管渲染了新元素，如何将元素固定到其当前位置？

Question

我有 <h1/> 和 <input/> 元素，输入文本后，<button/> appears/renders

Answer 1

尽管您可能需要根据整个 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 children/sub divs 出现在彼此下方而不是并排出现。

编辑：

<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>

您必须编辑 button 样式以使其看起来像您想要的样子。

ReactJS：尽管渲染了新元素，如何将元素固定到其当前位置？

ReactJS: How to fix an element to its current position despite rendering of new element?

html

javascript

css

reactjs

react-jsx

编辑 2：