从状态 onclick 更改信息答案

【问题标题】：Changing informtion from state onclick从状态 onclick 更改信息
【发布时间】：2019-08-09 17:59:38
【问题描述】：

简单的 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>
  )
};

【问题讨论】：

嗨，Lee，阅读这个 - stackoverflow.com/help/someone-answers，然后尝试结束这个问题。

标签： reactjs

【解决方案1】：

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

selected: ''   //Add this in state

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

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

并且在父组件中应该发送类似的props，

<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

【讨论】：

您介意向我解释一下吗？我看看我是否删除了 '{this.state.selected &&' 部分，默认情况下会显示一些文本。这个声明如何/为什么只有在出现 onClick 时才会生效？ {this.state.selected &&
Selected

标题：{this.state.selected.title}

持续时间：{this.state.selected.持续时间}
}
这是一个条件。当this.state.selected 为真时，打印<React.Fragment> <h2>Selected</h2> <div> Title : {this.state.selected.title}</div> <div> Duration : {this.state.selected.duration}</div> </React.Fragment>。您可以在这里查看更多信息 - reactjs.org/docs/…

【解决方案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>)
)}

【讨论】：