Question

我正在使用ReactJs来开发我的应用程序。我正在尝试通过处理onKeyPress事件按下Enter时提交输入文本。它会检测其他输入，但不会输入。我尝试了不同的方式 - event.key，event.charCode，event.keyCode，event.which ......似乎没有任何效果。

React.createElement("input", {tabIndex: "1", onKeyPress: this.handleKeyPress, onChange: this.handleChange, 
                           placeholder: "ex: 1,10,15"}), 

handleChange: function (event) {
        this.setState({userInputBuckets: event.target.value});
    },
handleKeyPress: function (event) {
        if (event.charCode == 13) {
            event.preventDefault();
            this.props.table.handleSubtotalBy(this.props.columnDef, this.state.userInputBuckets);
        }
    },

我还尝试使用onKewDown处理，它检测到正确的密钥，但即使它将event.keyCode == 13评估为真，它也不会执行if块。

Answer 1

将e.stopPropagataion从handleSubtotalBy移至handleKeyPress：

handleKeyPress(event) {
  if (event.charCode == 13) {
    event.preventDefault();
    event.stopPropagation();
    this.props.table.handleSubtotalBy(this.props.columnDef, this.state.userInputBuckets);
  }
}


handleSubtotalBy(columnDef, partitions) { 
  const subtotalBy = this.state.subtotalBy || [];
  // ...
}

Answer 2

Given answer未完成，

使用

public class CollectionListItem {

    @SerializedName ("type")
    String type;

    @SerializedName ("order")
    Integer order;

    @SerializedName ("id")
    Integer id;

    @SerializedName ("type_id")
    Integer typeId;

    DataType1 dataType1;
    List<DataType2> dataType2;
    List<DataType3> dataType3;

    final static String DATA_TYPE_1 = "SHOP";
    final static String DATA_TYPE_2 = "TOP_AUDIOS";
    final static String DATA_TYPE_3 = "MEDIA_COLLECTION";

    //Public getters and setters

    public static class CollectionItemDeserializer implements JsonDeserializer<CollectionListItem> {

        @Override
        public CollectionListItem deserialize(JsonElement json, Type typeOfT, JsonDeserializationContext context) throws JsonParseException {
            CollectionListItem collectionItem = new Gson().fromJson(json, CollectionListItem.class);
            JsonObject jsonObject = json.getAsJsonObject();

            if (collectionItem.getType() != null) {

                JsonElement element = jsonObject.get("data");
                switch(collectionItem.getType()){
                    case CollectionListItem.DATA_TYPE_1 :
                        collectionItem.dataType1 = new Gson().fromJson(element, DataType1.class);
                        break;

                    case CollectionListItem.DATA_TYPE_2:
                        List<DataType2> values = new Gson().fromJson(element, new TypeToken<ArrayList<DataType2>>() {}.getType());
                        collectionItem.dataType2 = values;
                        break;

                    case CollectionListItem.DATA_TYPE_3:
                        List<DataType3> values_ = new Gson().fromJson(element, new TypeToken<ArrayList<DataType3>>() {}.getType());
                        collectionItem.dataType3 = values_;
                        break;
                }
            }
            return collectionItem;
        }
    }

}

支持所有浏览器：

除此之外，给出的答案是正确的。复制那个。

如何在与React一起使用时检测keyPress上的“Enter”键

2 个答案: