Question

我在更新状态值时遇到问题，我正在使用Map渲染外部组件，因此无法访问此。所以点击组件我无法调用handleClick函数来更新状态值..

这是州：

this.state = {
   attributes : {
       hours : {

       },
       cost : 0,
       amenities : defaultAmenities
   },
   primary_category : "General"
}

defaultAmenities 是具有大型javascript对象的外部文件。

渲染功能：

render() {
    let basicAmenities, extendedAmenities
    let basicAmenitiesList = [], extendedAmenitiesList = []

    //Wrong way of storing this
    let _this = this;
}

... More Logics / Switch Cases ...

let amenitiesList = basicAmenitiesList.map(function(item, index){
    return <Attribute key={index} name={item.amenity_id} type={item.title} icon={item.icon} selected={item.isSelected} value="" onClick={_this.handleClick.bind(_this)}/>
})

属性组件

<div className="attribute-grid" onClick={this.props.onClick}>
     ...
</div>

处理点击是点击属性时设置状态的函数。

handleClick(e) {
    console.log(e.target);
}

点击属性后，我需要更新状态。控制台日志的结果如下所示。我需要定位输入值，但由于它返回整个div，我如何获取name / value / placeholder的值？

<div class="attribute-grid-block" data-reactid=".0.2.0.3.0.1.$0.0"><div class="attribute-grid-img" data-reactid=".0.2.0.3.0.1.$0.0.0"><img src="petsIcon" data-reactid=".0.2.0.3.0.1.$0.0.0.0"></div><div class="attribute-grid-info" data-reactid=".0.2.0.3.0.1.$0.0.1"><h6 data-reactid=".0.2.0.3.0.1.$0.0.1.0">Pets</h6><input type="text" name="pets" placeholder="NO INFO FOUND" value="" disabled="" data-reactid=".0.2.0.3.0.1.$0.0.1.1"></div></div>

Answer 1

你可以从目标中得到你需要的东西。但你需要在你希望它成为目标的元素上设置onClick，然后你就可以拥有它：

handleClick(e) {
    const name = e.target.name;
    const value = e.target.value;
    const placeholder = e.target.placeholder;
    console.log(placeholder);
}

如果要在其他地方设置onClick，则需要发送所需的值，因此在Attribute组件中，您将拥有一个将在单击时调用的函数并调用{{1 }}

如果您需要在此函数中使用this.props.onClick({ name: '', value: ''});，并且您正在使用对类的反应。你可以这样写：

this

更新国家的问题 - React

1 个答案: