tepki seçim odak () değişiklikten sonra imleci görünmüyor

oy
0

Ben elle kontrol girişi alanına odaklamayı ayarlamak için ref ve odak () kullanmaya çalışıyorum. açılır menüden bir seçeneği seçtikten sonra, kontrol odağı alır ancak imleç görünmüyor. Bu sadece ilk zaman olur. Menünün sonraki açıklıklar üzerine imleç tüm denetim alanının odak birlikte görünür. Herhangi bir fikir nasıl bu çalışma almak için?

Bir örnek kod oluşturduk burada

Burada

Bu kodu verilmiştir:

import React, { Component } from react;
import ReactDOM from react-dom;
import Select from react-select;
import styled from styled-components;

import { stateOptions } from ./data.js;

class PopoutExample extends Component {
  selectRef = React.createRef();

  state = {
    isOpen: false,
    option: undefined,
  };

  toggleOpen = () => {
  const isOpening = !this.state.isOpen;
  this.setState(
    {
      isOpen: isOpening,
    },
() => isOpening && setTimeout(() => this.selectRef.focus(), 400),
);
};

onSelectChange = option => {
  this.toggleOpen();
  this.setState({ option });
};

render() {
  const { isOpen, option } = this.state;
  return (
    <Dropdown
      target={
        <MainButton onClick={this.toggleOpen}>
          {option ? option.label : Select a State}
        </MainButton>
      }
    >
      <Select
        menuIsOpen
        ref={ref => {
          this.selectRef = ref;
        }}
        styles={{
          container: provided => ({
          ...provided,
          display: isOpen ? block : none,
        }),
        }}
        onChange={this.onSelectChange}
        options={stateOptions}
        value={option}
        controlShouldRenderValue={false}
      />
    </Dropdown>
  );
}
}

const MainButton = styled.button`
  padding: 10px;
  background-color: aqua;
  width: 100%;
`;

const Dropdown = ({ children, target }) => (
  <div>
    {target}
    {children}
  </div>
);

ReactDOM.render(<PopoutExample />, document.getElementById(root));
Oluştur 24/10/2019 saat 13:03
kaynak kullanıcı
Diğer dillerde...                            

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more