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 12:03
kaynak kullanıcı
Diğer dillerde...                            


2 cevaplar

oy
1

Ben size ulaşmak için çalışıyor, yerine sakladığını davranışına karşı bir alternatif sunabilir Eğer Selectcss ile neden sadece do mount/ unmounto?

class PopoutExample extends Component {
  state = {
    isOpen: false,
    option: undefined
  };

  toggleOpen = () => {
    this.setState({
      isOpen: !this.state.isOpen
    });
  };

  onSelectChange = option => {
    this.setState({ option, isOpen: !this.state.isOpen });
  };

  render() {
    const { isOpen, option } = this.state;
    return (
      <Dropdown
        target={
          <MainButton onClick={this.toggleOpen}>
            {option ? option.label : "Select a State"}
          </MainButton>
        }
      >
        {isOpen && (
          <Select
            autoFocus
            menuIsOpen
            onChange={this.onSelectChange}
            options={stateOptions}
            value={option}
            controlShouldRenderValue={false}
          />
        )}
      </Dropdown>
    );
  }
}

Bir Buraya Canlı bir örnek benim çözümün.

Cevap 29/10/2019 saat 04:06
kaynak kullanıcı

oy
0

Böceğin da bulunduğunu fark edebilirsiniz örnekler seçimini tepki yetkilisi . Hatta tıklayarak blurseçim problem çözme değil sonra düğmeye.

Kodda küçük bir farklı kullanıcı muhtemelen var closesmenü ve saves + automatically closeseylem.

Ben bir açtım gördü sorunu üzerinde github. Diyelim buna göz kulak.

Cevap 31/10/2019 saat 20:21
kaynak kullanıcı

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