Javascript 反应式复卷机动态组件（Solr）

我有点不熟悉这个

我有一个react类，它正在呈现许多项：（示例）

---

首先要更改的是使用

React.createClass

。这一点在支持ES6语法的情况下已被取消。另外，我也不建议同时使用jQuery。这是不可能做到的，但还有其他事情要考虑。我将在这里使用它，但是考虑一些类似于<代码> FETCH <代码> >或<代码> AXIOS < /C> >（或许多其他库中的一个）来获取数据。 我认为你的思路是对的，但有一些事情需要更新。由于可用选项正在更改，我会将它们置于components状态，然后让

handleUpdateEvent

函数更新状态，这将触发重新渲染

你的班级看起来像这样：

class Results extends React.Component {
  constructor(props) {
    super(props);

    // this sets the initial state to the passed in results
    this.state = {
      results: props.results
    }
  }

  handleUpdateEvent(id) {
    const optionsURL = {
      dataType: 'json',
      type: 'POST',
      url: `http://localhost:8983/solr/jcg/dataimport?command=delta-import&clean=false&commit=true&json.nl=map&wt=json&json.wrf=?&id=${ id }`
    };

    // Instead of calling another function, we can do this right here.
    // This assumes the `results` from the ajax call are the same format as what was initially passed in
    jQuery.ajax(optionsURL).done((results) => {
      // Set the component state to the new results, call `this.props.onSearch` in the callback of `setState`
      // I don't know what `docSolrSvc` is, so I'm not getting into the `onSearch` function
      this.setState({ results }, () => {
        this.props.onSearch(results.query);
      });
    });
  }

  render() {
    const tdLabelStyle = {
      width: '150px'
    };

    // use this.state.results, not this.props.results
    return (
      <div id="results-list">
        {
          this.state.results.documents.map((item) => (
            <div>
              <div id={ item.id } key={ item.id } className="container-fluid result-item">
                <div className="row">
                  <div className="col-md-6">
                    <table>
                      <tr><td colspan="2">{item.name}</td></tr>
                      <tr style={{marginTop:'5px'}}>
                        <td style={ tdLabelStyle }><b>Amount:</b></td>
                        <td>{item.amount}&nbsp;&nbsp;
                          <button type="button" onClick={ () => { this.handleUpdateEvent(item.id) } }  title="Refresh Amount" >Refresh</button>
                        </td>
                      </tr>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          ))
        }
      </div>
    );
  }
}

类结果扩展了React.Component{
建造师（道具）{
超级（道具）；
//这会将初始状态设置为传入的结果
此.state={
结果：道具
}
}
handleUpdateEvent（id）{
常量选项URL={
数据类型：“json”，
键入：“POST”，
网址：`http://localhost:8983/solr/jcg/dataimport?command=delta-import&clean=false&commit=true&json.nl=map&wt=json&json.wrf=？&id=${id}`
};
//不用调用另一个函数，我们可以在这里执行此操作。
//这假设来自ajax调用的“结果”与最初传入的格式相同
ajax（optionsURL）.done（（结果）=>{
//将组件状态设置为新结果，在“setState”的回调中调用“this.props.onSearch”`
//我不知道'docSolrSvc'是什么，所以我不想使用'onSearch'函数
this.setState（{results}，（）=>{
this.props.onSearch（results.query）；
});
});
}
render（）{
常数tdLabelStyle={
宽度：“150px”
};
//使用this.state.results，而不是this.props.results
返回(
{
this.state.results.documents.map（（项）=>(
{item.name}
数量：
{item.amount}
{this.handleUpdateEvent（item.id）}title=“刷新金额”>刷新
))
}
);
}
}

能否请您将代码添加到

onSearch

函数中，该函数在

handleUpdateEvent

中调用？@MarkRabey我已在原始帖子中添加了代码。

 handleSearchEvent: function (query) {

                if (this.state.query != null)
                    {
                        if (this.state.query.filters != null)
                            {
                                query.filters = this.state.query.filters;
                            }
                    }
                $("#load-spinner-page").show();
                if (app.cache.firstLoad) {
                    $("body").css("background","#F8F8F8");
                    app.cache.firstLoad = false;
                }
                var _self = this;
                app.cache.query = query;
                docSolrSvc.querySolr(query, function(solrResults) {
                    _self.setState({query: query, results: solrResults});
                    $("#load-spinner-page").hide();
                });

            },

class Results extends React.Component {
  constructor(props) {
    super(props);

    // this sets the initial state to the passed in results
    this.state = {
      results: props.results
    }
  }

  handleUpdateEvent(id) {
    const optionsURL = {
      dataType: 'json',
      type: 'POST',
      url: `http://localhost:8983/solr/jcg/dataimport?command=delta-import&clean=false&commit=true&json.nl=map&wt=json&json.wrf=?&id=${ id }`
    };

    // Instead of calling another function, we can do this right here.
    // This assumes the `results` from the ajax call are the same format as what was initially passed in
    jQuery.ajax(optionsURL).done((results) => {
      // Set the component state to the new results, call `this.props.onSearch` in the callback of `setState`
      // I don't know what `docSolrSvc` is, so I'm not getting into the `onSearch` function
      this.setState({ results }, () => {
        this.props.onSearch(results.query);
      });
    });
  }

  render() {
    const tdLabelStyle = {
      width: '150px'
    };

    // use this.state.results, not this.props.results
    return (
      <div id="results-list">
        {
          this.state.results.documents.map((item) => (
            <div>
              <div id={ item.id } key={ item.id } className="container-fluid result-item">
                <div className="row">
                  <div className="col-md-6">
                    <table>
                      <tr><td colspan="2">{item.name}</td></tr>
                      <tr style={{marginTop:'5px'}}>
                        <td style={ tdLabelStyle }><b>Amount:</b></td>
                        <td>{item.amount}&nbsp;&nbsp;
                          <button type="button" onClick={ () => { this.handleUpdateEvent(item.id) } }  title="Refresh Amount" >Refresh</button>
                        </td>
                      </tr>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          ))
        }
      </div>
    );
  }
}