React渲染相同的元素，它是动态组件

Question

I don't know how call this situation. It is following

I have a dynamic component which render a

<input type="text" placeholder={this.props.reduxStateValue} />

ie

function dynamicInput() {
    var page = this.props.kindOfPage,
        rState = this.props.reduxState;
    if (page === 'foo') {
        // foo input
        // eg. rState.value === 10
        return <input type="text" placeholder={rState.value} 
                      onChange={this.handleFoo} />
    } else {
        // bar input
        // eg. rState.value === 20
        return <input type="text" placeholder={rState.value} 
                      onChange={this.handleBar} />
    }
}

The above example is very simple verion. The components has many different things for each this.props.kindOfPage .

The problem is that when the page === 'foo' and I insert 100 into the <input/> and switch to page !== foo , the 100 is in the <input/> of page !== foo .

ie If I call the <input/> of page === 'foo' case as foo input and another as bar input ,

1. insert 100 into foo input
2. switch the page to page !== foo then bar input is rendered
3. the 100 is in bar input

But the real value of each <input> has its own value. ie

1. The foo input :

value : 100 , placeholder : 10 , shown value : 100

2. The bar input :

value : '' , placeholder : 20 , shown value : 100

What I want to do is that the bar input show its placeholder 20 since we do not insert the value 100 in bar input .

I think this problem is occurred because of VirtualDOM of react. The renderer just change its DOM when there is a different between each elements. Hence, whenever I change the attributes, the element is not changed and the value of input element also not changed.

But, I want to separate both and show different values. Is there any idea?

Answer 1

Perhaps you could approach this problem slightly differently by decoupling dynamic event binding from your component's render method to deal with this characteristic of React's rendering and DOM diffing.

Rather than conditionally render components with different event handlers as you currently are, why not opt for a more efficient render implementation (ie without conditional branching) by using a common event handler that dynamically invokes the appropriate event based on your kindOfPage state?

So for instance, you could follow this pattern (pseudo code):

function handleGeneric(event) {

    var page = this.props.kindOfPage;

    // Introduce dynamic branching in "generic" event handler, like so
    switch(page) {
      case 'foo':{
        this.handleFoo(event)
        break;
      }
      default:{
        this.handleBar(event)
        break;
      }
    }
}

function dynamicInput() {
    var rState = this.props.reduxState;

    // Simplyify your render method in this way, and delegate conditional
    // branching to event handler    
    return <input type="text" placeholder={rState.value} 
                  onChange={ event => this.handleGeneric(event) } />
}

Answer 2

Assuming I am right, I think you can simply add a key attribute to the input to fix this problem. like this:

renderInput () {
        var page = this.state.kindOfPage
        var rState = this.state.reduxState;
        if (page === 'foo') {
            // foo input
            // eg. rState.value === 10
            return <input type="string" placeholder={rState.value1} key={"input1"}
                          onChange={this.handleBar} />
        } else {
            // bar input
            // eg. rState.value === 20
            console.log('test')
            return <input type="string" placeholder={rState.value} key={"input2"}
                          onChange={this.handleFoo} />
        }
  }