更改多个项目中按钮上的文本（React.js）

Question

我是使用 react 的新手。我有一系列数据，每个项目都有一个按钮，通过单击它，必须更改特殊 div 的文本，但在我的问题中，通过单击一个项目的按钮，所有项目中的div的文本都将被更改。我希望当我单击按钮时，该项目中的那个div的文本被更改。提前谢谢

class App extends React.Component {
constructor(props, context){
super(props, context);
this.state = {
data: [],
};
    $.ajax({
    url:"/json.bc",
    type:"get",
    success:(result)=>{
    this.setState({data: eval(result)});
    }
    })
    }
   renderFlight(){
   return this.state.data.sort((a, b) => a.total -    b.total).map((item,i)=>{
  return(
  <div class="item"> <div class="btn" onClick={((e) => this.rueldep(e, item))}>click</div>
  <div  class="text">{this.state.txt}</div>
  </div>
 )})}
 rueldep= (e, item) => {
  var Text= item.info.departureinformation.routeshow.description
   if (typeof desc === 'string'){
    return desc
     } else {
    this.setState({
        txt: Text
     });      
    }
    }; 

  render(){
    return(
   <div>{this.renderFlight()}</div>
    )}}
   ReactDOM.render(<App/>, document.getElementById('Result')); 

Answer 1

你可以使用地图中的索引来实现你想要的

在状态中初始化一个数字变量

  this.state = {
     data: [],
      id: 0
  };

在 rueldep 处理函数中，将 index + 1 设置为 id 状态变量，如下所示

    rueldep= (e, item, index) => {
      var s = item.info.departureinformation.routeshow.description
       if (typeof desc === 'string'){
         return desc
       } else {
            this.setState({
                txt: 'clicked',
                id: index+1
            });      
        }
      }; 

现在在 renderFlight 方法中比较选定的 id 和数据中的 id，如果两者都匹配显示文本到特定的 div，如下所示。循环渲染时不要忘记为父 jsx 元素添加唯一键

  renderFlight(){
     return this.state.data.sort((a, b) => a.total -    b.total).map((item,i)=>{
     return(
        <div key={"Key-"+i} class="item"> <div class="btn" onClick={e => this.rueldep(e, item, i)}>click</div>
       <div  class="text">{(this.state.id == i +1) ?this.state.txt : null}</div>
    </div>
     )})}