Question

const addvariableSlider = [
  'Discount Rate',
  'Total Volume',
  'R&D'
]       
 class HelloMessage extends React.Component {
    dis(){
        return (
              < Range     
                value={this.state.discountRateRange}
                onChange={this.discountChange}
                onAfterChange={this.discountAfterChange}     
              />
            )
        }
 totVol(){
        return (
              < Range     
                value={this.state.totalVolRateRange}
                onChange={this.totalVolChange}
                onAfterChange={this.totalVolAfterChange}     
              />
            )
        }
onSliderVarClick = (e) => {
    if (e.value == "Discount Rate") {
      this.dis()
    }
if(e.value=="Total Volume"){
this.totVol();
}
  }
          render() {

            return (
              <div>
  <Dropdown options={addvariableSlider} onChange={this.onSliderVarClick} value="" placeholder="Add Variable" /><br />

              </div>
            );
          }
        }

无论我基于下拉值调用的函数是什么，如何在render函数中动态显示那些返回的组件？在渲染中显示后，我可以处理onchange和onAfterChange事件

Answer 1

这是正确的方法。

这些要注意的地方：

您不应该在render内部创建函数。
您需要将这些函数创建为类实例，而不是常规实例。
您需要将所有函数都创建为arrow函数，以摆脱绑定对象。
返回某些内容时，需要调用该函数。

然后尝试此更新的答案

class HelloMessage extends React.Component {

    discountChange = () => {
        alert('onChange called')
    }

    add = () => {
        return (< Range
            value={this.state.discountRateRange}
            onChange={this.discountChange}
            onAfterChange={this.discountAfterChange}
        />
        )
    }
    render() {
        return (
            <div>
                {this.add()}
            </div>
        );
    }
}

Answer 2

继续@Harish Soni的逻辑，此示例简化了代码并使代码更接近工作组件：

class HelloMessage extends React.Component {
    constructor(){
        this.state= {
          discountRateRange = 'something'
        }
    }

    discountChange = () => {
        alert('discountChange called')
    }

    discountAfterChange = () => {
        alert('discountAfterChange called')
    }


    render() {
        return (
            <div>
                <Range
                  value={this.state.discountRateRange}
                  onChange={this.discountChange}
                  onAfterChange={this.discountAfterChange}
                />
            </div>
        );
    }
}

如何为返回的组件编写onchange事件

2 个答案: