Question

我有一系列数据，通过单击搜索文本，应该显示每个项目中输入的值，但是仅显示最后一个项目中输入的值。当我更改为以下代码时不会有任何结果。

    class App extends React.Component {
    constructor(props){
      super(props);
      this.state = {
       data: [],
      };

             $.ajax({
             url:"/json.bc",
             type:"post",
             success:(result)=>{
                this.setState({data: eval(result)});
             }})

    this.handelSearch = this.handelSearch.bind(this);
    }

  render() {
  const { data, currentPage, itemsPerPage } = this.state;
  const indexOfLastItem = currentPage * itemsPerPage;
  const indexOfFirstItem = indexOfLastItem - itemsPerPage;
  const currentItems = data.slice(indexOfFirstItem, indexOfLastItem);
  const renderInfo= currentItems.map((item, i) => {
   return  <div class="item">
             <input type="hidden" value={item.name}  ref={(ref) => this.name[i] = ref} />
          </div>
        });


 return (
   <div>
   <input type="hidden" value={this.state.data.length}  ref="dateLen" />
    <span onClick={this.handelSearch}>search</span>
    {renderInfo}
   </div>
  )};

 handelSearch(event){
   var dateLen = this.refs.dateLen.value
     for(var i=1 ; i<=dateLen;i++){
      console.log(this.realname[i].value)
     }
 }}
ReactDOM.render(<App/>, document.getElementById('Result'));

Answer 1

这是使用以下代码编写代码的更简洁的方法，能否请您遵循这种模式。阅读以下评论，看看有什么变化： -组件中不存在函数renderAltImages()！ -除非要控制这些输入，否则应在输入中使用defaultValue而不是value。

import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
const $ = require("jquery");

class App extends React.Component {
  constructor(props) {
    // in constructors we define an initialState for our component.
    super(props);
    this.state = {
      data: []
    };
    // here we bind our function to the Component Scope.
    this.handelSearch = this.handelSearch.bind(this);
  }

  componentDidMount() {
    // in this Component Life Cycle (componentDidMount), we make our fetch requests.
    $.ajax({
      url: "/json.bc",
      type: "post",
      success: result => {
        this.setState({ data: eval(result) });
      }
    });
  }

  handelSearch(event) {
    var dateLen = this.refs.dateLen.value;
    for (var i = 1; i <= dateLen; i++) {
      console.log(this.realname[i].value);
    }
  }

  render() {
    const { data, currentPage, itemsPerPage } = this.state;
    const indexOfLastItem = currentPage * itemsPerPage;
    const indexOfFirstItem = indexOfLastItem - itemsPerPage;
    const currentItems = data.slice(indexOfFirstItem, indexOfLastItem);
    const renderInfo = currentItems.map((item, i) => {
      return (
        <div class="item">
          <input
            type="hidden"
            value={this.renderAltImage(item.hotelinfo.hotelsearch)} //there is no renderAltImage() function in your componenet,, where is it?
            ref={ref => (this.realname[i] = ref)}
          />
        </div>
      );
    });
    // you named this renderHotels, while you printed renderInfo below, so I changed it to renderInfo instead.

    return (
      <div>
        <input type="hidden" value={this.state.data.length} ref="dateLen" />
        <span onClick={this.handelSearch}>search</span>
        {renderInfo}
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

如何通过React获取多个项目中的输入值

1 个答案: