最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to prevent modal from re-rendering when I update the state? - Stack Overflow

programmeradmin4浏览0评论

I have a react-bootstrap modal with two inputs inside. Modal is displayed when showModal property in the state changes to true. I update the fieldOne property (also inside the state) when input value changes. So, whenever I enter something in the input, modal flashes (re-renders) as well.

How to I prevent Modal from re-rendering when I update the state?

I have a react-bootstrap modal with two inputs inside. Modal is displayed when showModal property in the state changes to true. I update the fieldOne property (also inside the state) when input value changes. So, whenever I enter something in the input, modal flashes (re-renders) as well.

How to I prevent Modal from re-rendering when I update the state?

Share Improve this question edited Mar 7, 2020 at 9:59 tipos asked Feb 3, 2020 at 14:05 tipostipos 4421 gold badge4 silver badges13 bronze badges 0
Add a ment  | 

5 Answers 5

Reset to default 1

If you don't want a re-render use a variable other than state to hold your data:

constructor (props) {
  super(props);
  this.state = {
    input: ''
  };
  this.holder = '';
}
handleInput(input) {
  this.holder = input;
}
submitInput() {
  this.setState({input: this.holder})
}
render () {
  return (
    <input type="text" onChange={(e) => this.handleInput(e.target.value)} onBlur={() => this.submitInput()} />
  )
}

The purpose of state is for React to evaluate if the DOM needs to change, and if it does it re-renders.

I hit the same problem - putting a form in a modal resulted in the modal rerendering on each keypress.

I could probably get around this by splitting out the form from the modal, BUT I wanted the modal and the form in the same ponent because the modal buttons trigger the form save. Yes there's other ways to handle that too like passing the save function between the split modal and the form, but now it's getting messy.

So my solution was to make the form in the modal uncontrolled. This means that changing the field values does not modify state and therefore the modal does not rerender.

Maybe you should split your modal with the inputs into two seperate ponents. That should fix your rerender issues.

Set the Modal's view condition with separate states solves this issue. Herewith a demo example, I used two seperate states i.e, firstView & secondView

import Modal from 'react-bootstrap/Modal'
import ModalBody from 'react-bootstrap/ModalBody'


class Demo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            demoModal: true,
            firstView: true,
            secondView: false
        };
    };
    render() {
        return (
            <div>
                <Modal scrollable={true} show={this.state.demoModal} fade={false} style={{ display: "block"}}>
                    <ModalBody>
                        <div>
                            {
                                this.state.firstView ?
                                    <div>
                                        ..code
                                    </div>
                                    :
                                    <></>
                            }
                            {
                                this.state.secondView ?
                                    <div>
                                        ..code
                                    </div>
                                    :
                                    <></>
                            }
                        </div>
                    </ModalBody>
                </Modal>
            </div>
        );
    }
}

separate form into different ponent.

<Modal>
<YourForm />
</Modal>

so when your form updated onchange, only YourForm ponent state is updated

发布评论

评论列表(0)

  1. 暂无评论