Question

我是reactjs的新手。我想访问重复反应组件的状态。我的代码是

{Object.keys(this.state.sharing).map((share)=>{              
                          return(<Sharings />)
                                               })}

以上组件重复3次

共享组件包含单选按钮和按钮。单击单选按钮时，仅启用按钮。这是我的代码

<div className="col-xs-12 col-md-4">
                <div className="book-now-card p-b-10" style={{height:height}}>
                    <div className="single-sharing" style={{height: '180px'}}>
                        <h3 className="single-sharing-heading">{props.heading}</h3>
                    </div>
                    <div className="m-t-20">
                        {
                            props.rent.map((rent)=>{
                                return(
                                    <div className="m-10" key={rent}>
                                        <input type="radio" name={'radio'} className="m-l-20 " onClick={(e)=>{this.handleChange(rent,e)}} /> <span className="m-l-20" style={{color:'#009688'}}>₹ {rent}</span>
                                        <p className="m-l-55 f-s-12" style={{color: '#65747a'}}>{props.details}</p>
                                    </div>
                                )
                            })
                        }
                    </div>
                    <div className="m-20">
                        <button className="btn btn-secondary col-6 select-rent" disabled={true} onClick={(e)=>{this.proceed(e)}} id={'Button'+this.props.num}>SELECT</button>
                    </div>
                </div>
            </div>

单击第2共享组件中的单选按钮时，我想在第1和第3共享组件的按钮中禁用按钮。我尝试使用document.getElementById进行DOM操作，但单击按钮功能停止工作。

Answer 1

您的input组件应为controlled component

在您的map方法中，您应该拥有以下内容：

<input
  type="radio"
  name={'radio'}
  className="m-l-20 "
  value={this.state.radiosValues[index]} {/* get radio value from state */}
  onClick={()=>{ // We don't need event because we work with booleans
    const radiosValues = this.state.radiosValues
    radiosValues[index] = !radiosValues[index] // If true we want false, if false we want true
    this.setState({ radioValues})
 }}
/>

如何在ReactJS中访问重复组件的状态

1 个答案: