Question

简单的React应用。

当我单击按钮时，我想显示该状态下的数据，例如，单击第一个按钮，我要从“列表状态”下的第一个对象获得详细信息（标题-test1持续时间2分钟。

因此，当您单击“ test1” cta时，我想在另一个div中显示“ test 1 duration 2 mins”。测试2将等于“ test2持续时间3分钟”。但是单击按钮时无法获取值，如果将值添加到按钮，则只能获取“标题”。

 this.state={
    list:[
        {
          title:'test1',
          duration:'2 mins'
        },
        {
          title:'test2',
          duration:'3 mins'
        },  
        {
          title:'test3',
          duration:'4 mins'
        },  
        {
          title:'test4',
          duration:'5 mins'
        }
      ]
 }

 changeList(e){
   var x=e.target.value;
   if (x=='test1'){
       console.log('duratiomn=-3')
   }
 }

 render() {
    return (
      <div>
        <Songselect list={this.state.list} changeList{(e)=>this.changeList(e)}/>
      </div>
    )
 }
}

const Songselect=(props)=>{
 return (
     <div>
        {props.list.map((item,index)=> <div><span name="test"> {item.title} 
         </span><button for='test' onClick={props.changeList} value= 
           {item.title}> select</button> </div>)}
     </div>
  )
};

Answer 1

您可以维护selected项目的状态。

selected: ''   //Add this in state

您需要从Songselect组件发回title所选项目，

onClick={()=>props.changeList(item.title)}

并且在父组件中应该发送道具，

<Songselect list={this.state.list} changeList={this.changeList}/>

您的changeList函数应该是

changeList = (title) => {  //Use arrow function which auto binds `this`
  const selected = this.state.list.filter(data=> data.title === title)
  this.setState({selected:selected[0]})
}

您可以显示父项中的选定项目，例如，

{this.state.selected &&
   <React.Fragment>
      <h2>
          Selected
      </h2>
      <div> Title : {this.state.selected.title}</div>
      <div> Duration : {this.state.selected.duration}</div>
   </React.Fragment>
}

Demo

Answer 2

您应该尝试使用箭头功能，例如：

changeList = item => event = {
    console.log(item);    
}

然后在您的map函数中，您可以这样称呼它：

{
 props.list.map((item,index)=> (
    <div>
        <span name="test"> {item.title} </span>
        <button for='test' onClick={props.changeList(item)}> 
            select
        </button>
    </div>)
)}

从onclick状态更改信息

2 个答案: