Question

我试图通过使用componentWillUpdate而不使用setInterval来重新渲染它。我读过React生命周期。我很自信我在事件发射/ dom渲染时遗漏了一些东西。

var MainDiv = React.createClass({
  loadModuleFromServer: function(value) {

    var iri = 'http://someurl';
    value = this.state.value;

    $.ajax({
      url: iri + value,
      method: 'GET',
      dataType: 'json',
      cache: true,
      success: function(data) {
        this.setState({data: data['@key']});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },
  getInitialState: function() {
    return {data: [], windowWidth: window.innerWidth, value: "000001"};
  },
  handleResize: function(e) {
    this.setState({windowWidth: window.innerWidth});
  },
  handleChange: function() {
  this.setState({value: selectMenu.value});
  },
  componentDidMount: function() {
    this.loadModuleFromServer();
    setInterval(this.loadModuleFromServer, this.props.pollInterval);
    window.addEventListener('resize', this.handleResize);
  },
render: function() {
    return (
      <div className="MainDiv">
      <div className="header">
      <h1><img src={'http://someurl?w=' + this.state.windowWidth} alt="header"/>
      </h1></div>
        <HeroData data={this.state.data} width={this.state.windowWidth}/>
      <select id="selectMenu" onChange={this.handleChange} value={this.props.value}>
      <option value="000001">English</option>
      <option value="000002">French</option>
      </select>
        </div>
    );
  }
});
ReactDOM.render(
  <MainDiv pollInterval={1000}/>,
  document.getElementById('content')
);

输出是：

<div class="MainDiv" data-reactid=".0">
    <div class="header" data-reactid=".0.0">
        <h1 data-reactid=".0.0.0"><img src="http://someheader?w=1280" alt="header" data-reactid=".0.0.0.0"></h1></div>
    <div class="mainModule" data-reactid=".0.1"><img src="https://someurl?w=1280&fmt=jpg" alt="Alt text" data-reactid=".0.1.0">
        <h2 data-reactid=".0.1.1"><span data-reactid=".0.1.1.0">Blurb1</span></h2>
        <h3 data-reactid=".0.1.2"><span data-reactid=".0.1.2.0">Blurb2.</span></h3>
        <h4 data-reactid=".0.1.3"><span data-reactid=".0.1.3.0">Blurb3</span></h4><a href="http://someurl" class="CTA" data-reactid=".0.1.4">Click here</a></div>
    <select id="selectMenu" data-reactid=".0.2">
        <option value="000001" data-reactid=".0.2.0">English</option>
        <option value="000002" data-reactid=".0.2.1">French</option>
    </select>
</div>

我省略了用于映射从服务器检索的数据以获取此内容的部分。

非常感谢。

编辑：我遵循了Kishore Barik的建议。事件被解雇了。但它仍未引发重新报复。它没有听取事件的变化。所以我将componentDidMount更改为：

componentDidMount: function() {
    this.loadModuleFromServer();
    selectMenu.addEventListener('change',this.loadModuleFromServer);
    window.addEventListener('resize', this.handleResize);
  },

和handleChange to：

handleChange: function(e) {
this.setState({value: selectMenu.value});
},

它正在重新渲染，但背后有一个变化，即。根据选择，选择法语时显示英语内容，选择英语时显示法语。感谢您的帮助。

Answer 1

首先检查您的 handleChange 方法是否被调用或者没有调用console.log 如果它被调用，我可以看到一个错误，即在 handleChange 内，您从selectMenu.value获取值，其中 selectMenu 未定义。为此，您始终可以使用旧的javascript / jquery方式检索值

document.getElementById('selectMenu').value();

或$('#selectMenu').val()

或者您可以使用反应方式。为了那个原因 1.你必须提供你的选择

<select id="selectMenu" ref="mySelect" onChange={this.handleChange} value={this.props.value}>

然后你必须根据你的反应版本
获取select中的值
this.refs.mySelect.value;

或

this.refs.mySelect.getDOMNode().value;

或

ReactDOM.findDOMNode(this.refs.mySelect).value;

如果您有任何疑问，请查看文档或评论

根据对问题的新更改进行编辑

无需从 componentDidMount 添加选择更改的事件侦听器只是做

handleChange: function() {
  this.loadModuleFromServer(selectMenu.value);
},

并删除 loadModuleFromServer 函数体中的 value = this.state.value; 行。

Answer 2

您可以将事件传递给您的函数或直接设置状态

    <select onChange={event => this.setState({value:event.target.value})}>

触发器在下拉选择菜单更改时重新渲染 - 使用React

2 个答案: