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处理程序函数中，将索引+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都匹配显示文本到特定的div，则将比较选定的ID和数据中的ID，如下所示。同样，当您进行循环渲染时，请不要忘记为父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>
     )})}

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

1 个答案: