Fatal编程技术网
  • javascript/
  • Javascript 反应选择输入在我可以（鼠标单击）选择选项之前关闭

Javascript 反应选择输入在我可以（鼠标单击）选择选项之前关闭

javascript reactjs

Javascript 反应选择输入在我可以（鼠标单击）选择选项之前关闭,javascript,reactjs,react-select,Javascript,Reactjs,React Select,编辑：这个问题发生在Firefox（Ubuntu 16）中，但是使用Chrome我没有这个问题 使用React.js和React select，我有以下情况： 当我单击select输入时，会显示带有选项的下拉列表，但它几乎会立即关闭 期望的行为：在我选择一个选项之前保持打开状态 有人知道为什么会这样吗 这是我的代码（至少是部分代码） 包含选择输入的组件： import React from "react"; import { sec } from "../style/Colors"; impor

编辑：这个问题发生在Firefox（Ubuntu 16）中，但是使用Chrome我没有这个问题

使用React.js和React select，我有以下情况：

当我单击select输入时，会显示带有选项的下拉列表，但它几乎会立即关闭

期望的行为：在我选择一个选项之前保持打开状态

有人知道为什么会这样吗

这是我的代码（至少是部分代码）

包含选择输入的组件：

import React from "react";
import { sec } from "../style/Colors";
import Select from "react-select";

const TagSelectForm = ({ onTagSelectChange, options }) => {
  return (
    <div className="tagselect-main-container">
      <Select isMulti={true} onChange={onTagSelectChange} options={options} />
    </div>
  );
};

export default TagSelectForm;


import React, { Component } from "react";
import ContentRequest from "../components/ContentRequest";
import axios from "axios";
import TagSelectForm from "../components/TagSelectForm";
import styled from "styled-components";

class OverviewPage extends Component {
  state = {
    contentRequests: [],
    contentRequestTags: [],
    filterTags: []
  };

  async componentDidMount() {
    const { data: JSON_string } = await axios.get(
      "http://localhost:8000/request"
    );
    const { requests, tags } = JSON.parse(JSON_string);
    this.setState({ contentRequests: requests, contentRequestTags: tags });
  }

  filterByTags = () => {
    const { contentRequests } = this.state;
    const filteredRequests = contentRequests.filter(request =>
      this.testContainsAFilterTag(request.tags)
    );
    return filteredRequests;
  };

  handleAddFilterTag = tag => {
    const filterTags = [...this.state.filterTags, tag];
    this.setState({ filterTags });
  };

  handleTagSelectChange = selectedTagsList => {
    this.setState({ filterTags: selectedTagsList });
  };

  handleRemoveFilterTag = tagID => {
    const filterTags = this.state.filterTags.filter(tag => tag.id !== tagID);
    console.log("filterTags", filterTags);
    this.setState({ filterTags });
  };

  setOverViewpageState = (stateName, stateValue) => {
    this.setState({ [stateName]: stateValue });
  };

  testContainsAFilterTag = tags => {
    const { filterTags } = this.state;
    const filterTagIDs = filterTags.map(tag => tag.value);
    return tags.some(tag => filterTagIDs.includes(tag.id));
  };

  renderRequests = () => {
    let { contentRequests } = this.state;
    const { filterTags } = this.state;
    const { loginToken, userID } = this.props;

    if (filterTags.length > 0) {
      contentRequests = this.filterByTags();
    }

    return (
      <RequestList>
        {contentRequests.map(request => (
          <ContentRequest
            contentRequests={contentRequests}
            key={request.id}
            loginToken={loginToken}
            request={request}
            setOverViewpageState={this.setOverViewpageState}
            userID={userID}
          />
        ))}
      </RequestList>
    );
  };

  render() {
    const { contentRequestTags, filterTags } = this.state;
    return (
      <MainContainer>
        <PageTitle>Content Request Overview</PageTitle>

        <TagSelectForm
          onTagSelectChange={this.handleTagSelectChange}
          options={contentRequestTags}
        />

        {this.renderRequests()}
      </MainContainer>
    );
  }
}

export default OverviewPage;

const MainContainer = styled.div`
  box-sizing: border-box;
  display; flex;
  flex-direction: column;
  max-width: 768px;
  margin: 0 auto;
  padding: 0.5rem;
`;

const PageTitle = styled.h1`
  font-size: 1.25rem;
`;

const RequestList = styled.ul`
  list-style-type: none;
  padding: 0;
`;

从“React”导入React；
从“./style/Colors”导入{sec}；
从“反应选择”导入选择；
const TagSelectForm=（{onTagSelectChange，options}）=>{
返回(
);
};
导出默认标记SelectForm；
父组件：

import React from "react";
import { sec } from "../style/Colors";
import Select from "react-select";

const TagSelectForm = ({ onTagSelectChange, options }) => {
  return (
    <div className="tagselect-main-container">
      <Select isMulti={true} onChange={onTagSelectChange} options={options} />
    </div>
  );
};

export default TagSelectForm;


import React, { Component } from "react";
import ContentRequest from "../components/ContentRequest";
import axios from "axios";
import TagSelectForm from "../components/TagSelectForm";
import styled from "styled-components";

class OverviewPage extends Component {
  state = {
    contentRequests: [],
    contentRequestTags: [],
    filterTags: []
  };

  async componentDidMount() {
    const { data: JSON_string } = await axios.get(
      "http://localhost:8000/request"
    );
    const { requests, tags } = JSON.parse(JSON_string);
    this.setState({ contentRequests: requests, contentRequestTags: tags });
  }

  filterByTags = () => {
    const { contentRequests } = this.state;
    const filteredRequests = contentRequests.filter(request =>
      this.testContainsAFilterTag(request.tags)
    );
    return filteredRequests;
  };

  handleAddFilterTag = tag => {
    const filterTags = [...this.state.filterTags, tag];
    this.setState({ filterTags });
  };

  handleTagSelectChange = selectedTagsList => {
    this.setState({ filterTags: selectedTagsList });
  };

  handleRemoveFilterTag = tagID => {
    const filterTags = this.state.filterTags.filter(tag => tag.id !== tagID);
    console.log("filterTags", filterTags);
    this.setState({ filterTags });
  };

  setOverViewpageState = (stateName, stateValue) => {
    this.setState({ [stateName]: stateValue });
  };

  testContainsAFilterTag = tags => {
    const { filterTags } = this.state;
    const filterTagIDs = filterTags.map(tag => tag.value);
    return tags.some(tag => filterTagIDs.includes(tag.id));
  };

  renderRequests = () => {
    let { contentRequests } = this.state;
    const { filterTags } = this.state;
    const { loginToken, userID } = this.props;

    if (filterTags.length > 0) {
      contentRequests = this.filterByTags();
    }

    return (
      <RequestList>
        {contentRequests.map(request => (
          <ContentRequest
            contentRequests={contentRequests}
            key={request.id}
            loginToken={loginToken}
            request={request}
            setOverViewpageState={this.setOverViewpageState}
            userID={userID}
          />
        ))}
      </RequestList>
    );
  };

  render() {
    const { contentRequestTags, filterTags } = this.state;
    return (
      <MainContainer>
        <PageTitle>Content Request Overview</PageTitle>

        <TagSelectForm
          onTagSelectChange={this.handleTagSelectChange}
          options={contentRequestTags}
        />

        {this.renderRequests()}
      </MainContainer>
    );
  }
}

export default OverviewPage;

const MainContainer = styled.div`
  box-sizing: border-box;
  display; flex;
  flex-direction: column;
  max-width: 768px;
  margin: 0 auto;
  padding: 0.5rem;
`;

const PageTitle = styled.h1`
  font-size: 1.25rem;
`;

const RequestList = styled.ul`
  list-style-type: none;
  padding: 0;
`;

import React，{Component}来自“React”；
从“./组件/ContentRequest”导入ContentRequest；
从“axios”导入axios；
从“./components/TagSelectForm”导入TagSelectForm；
从“样式化组件”导入样式化；
类概览页扩展组件{
状态={
contentRequests:[]，
contentRequestTags:[]，
过滤器标签：[]
};
异步组件didmount（）{
const{data:JSON_string}=wait axios.get(
"http://localhost:8000/request"
);
const{requests，tags}=JSON.parse（JSON_字符串）；
this.setState（{contentRequests:requests，contentRequestTags:tags}）；
}
filterByTags=（）=>{
const{contentRequests}=this.state；
const filteredRequests=contentRequests.filter（请求=>
this.testContainesFilterTag（request.tags）
);
返回筛选器请求；
};
HandLeadFilterTag=标签=>{
常量filterTags=[…this.state.filterTags，tag]；
this.setState（{filterTags}）；
};
handleTagSelectChange=selectedTagsList=>{
this.setState（{filterTags:selectedTagsList}）；
};
HandlerRemoveFilterTag=tagID=>{
const filterTags=this.state.filterTags.filter（tag=>tag.id！==tagID）；
日志（“filterTags”，filterTags）；
this.setState（{filterTags}）；
};
setOverViewpageState=（stateName，stateValue）=>{
this.setState（{[stateName]：stateValue}）；
};
TestContainesAfilterTag=标记=>{
const{filterTags}=this.state；
常量filterTagIDs=filterTags.map（tag=>tag.value）；
return tags.some（tag=>filtertagid.includes（tag.id））；
};
渲染请求=（）=>{
让{contentRequests}=this.state；
const{filterTags}=this.state；
const{loginToken，userID}=this.props；
如果（filterTags.length>0）{
contentRequests=this.filterByTags（）；
}
返回(
{contentRequests.map（请求=>(
))}
);
};
render（）{
const{contentRequestTags，filterTags}=this.state；
返回(
内容请求概述
{this.renderRequests（）}
);
}
}
导出默认概览页面；
const MainContainer=styled.div`
框大小：边框框；
展示；弯曲
弯曲方向：立柱；
最大宽度：768px；
保证金：0自动；
填充：0.5雷姆；
`;
const PageTitle=styled.h1`
字体大小：1.25rem；
`;
const RequestList=styled.ul`
列表样式类型：无；
填充：0；
`;
您是否介意提供一个工作示例来说明您的问题，使用类似这样的服务？这与代码无关，我注意到它在Chrome上运行良好，虽然不是在FireFox中。但是使用像您这样的示例将有助于重现错误并找到解决方案。您介意提供一个工作示例来说明您的问题吗？这与代码无关，我注意到它在Chrome上运行良好，虽然不是在FireFox中，但是有你用过的例子将有助于重现错误并找到解决方案。