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

我有一系列的数据，通过点击搜索文本，每个项目的输入值都应该显示出来，但它只显示最后一个项目的输入值。当我改为下面的代码时，不会有任何结果

    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'));

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
数据：[]，
};
$.ajax({
url:“/json.bc”，
类型：“post”，
成功：（结果）=>{
this.setState（{data:eval（result）}）；
}})
this.handleSearch=this.handleSearch.bind（this）；
}
render（）{
const{data，currentPage，itemsPerPage}=this.state；
const indexOfLastItem=currentPage*itemsPerPage；
常量indexOfFirstItem=indexOfLastItem-itemsPerPage；
const currentItems=data.slice（indexOfFirstItem，indexOfLastItem）；
const renderInfo=currentItems.map（（项，i）=>{
回来
this.name[i]=ref}/>
});
返回(
搜索
{renderInfo}
)};
handelSearch（活动）{
var dateLen=this.refs.dateLen.value
对于（var i=1；i这是一种更干净的编写代码的方法，
你能按照这个模式吗。
请阅读下面的评论以查看更改的内容：
-组件中不存在函数
renderTimages（）
！
-您应该在输入中使用
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”导入React；
从“react dom”导入react dom；
导入“/styles.css”；
const$=require（“jquery”）；
类应用程序扩展了React.Component{
建造师（道具）{
//在构造函数中，我们为组件定义一个initialState。
超级（道具）；
此.state={
数据：[]
};
//这里我们将函数绑定到组件范围。
this.handleSearch=this.handleSearch.bind（this）；
}
componentDidMount（）{
//在这个组件生命周期（componentDidMount）中，我们发出获取请求。
$.ajax({
url:“/json.bc”，
类型：“post”，
成功：结果=>{
this.setState（{data:eval（result）}）；
}
});
}
handelSearch（活动）{
var dateLen=this.refs.dateLen.value；
对于（var i=1；i{
返回(
（this.realname[i]=ref）}
/>
);
});
//您将这个renderHotels命名为renderHotels，同时在下面打印renderInfo，所以我将它改为renderInfo。
返回(
搜索
{renderInfo}
);
}
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）；
您能提供一个codesandbox.io示例吗？不清楚您在问什么我想通过单击“搜索”获取每个项目中重复的输入“this.realname[i]=ref}/>的值@LucaFabbri非常感谢您编辑我的代码。现在您可以看到编辑过的代码，但实际上我没有找到问题的解决方案。
this.renderatimage（）
此函数不存在，从这里开始，该怎么办？