ReactJS：如何修复一个元素到它的当前位置，尽管呈现新的元素？ [英] ReactJS: How to fix an element to its current position despite rendering of new element?

问题描述

我有< h1 /> 和< input /> 元素， ，则< button /> 出现/呈现

I have <h1/> and <input/> elements, and once a text is inputted, a <button/> appears/renders

推荐答案

虽然您可能需要根据整个HTML结构和CSS样式进行一些更改，但您可以

Although you might have to make some changes depending on your entire HTML structure and CSS styles, you could do

<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 到列，这使div子/子div出现在彼此下面，而不是在彼此旁边。

The main change i made is changed flexDirection from row to column, This makes the div children/sub divs appear below each other instead of appearing beside each other.

编辑：

<div style={{display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'flex-start'}}>

添加 justifyContent

编辑2：

added justifyContent property.

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

您必须将按钮让它看起来你想要的方式。

You have to edit the button styles to make it look the way you want.

这篇关于ReactJS：如何修复一个元素到它的当前位置，尽管呈现新的元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！