javascript - react : custom select element

Question

厌倦了 Firefox 丑陋的选择并且无法对其进行样式设置。我想出于学习目的我应该在 React 中做一个。

它似乎很容易实现，但我不知道如何使用自定义组件执行 onChange 以及如何通过事件获取值。如果可能的话...

Select 组件如下所示:

type SelectProps = {
  select: {
    value: any
    options: {
      [k: string]: any
    }
  }
}

type SelectState = {
  show: boolean
}

class Select extends Component<SelectProps, SelectState> {
  constructor(props: SelectProps) {
    super(props)
    this.state = {
      show: false
    }
  }
  label = (v: any): string | undefined => {
    for (var k in this.props.select.options) {
      if (this.props.select.options[k] === v) return k
    }
  }
  change = (i: number) => {
    this.setState({ show: false })
    this.props.select.value = this.props.select.options[this.keys[i]]
  }
  display = () => {
    this.setState({ show: !this.state.show })
  }
  keys = Object.keys(this.props.select.options)
  render() {
    let { show } = this.state
    let { options, value } = this.props.select
    return (
      <div className='select'>
        <button onClick={this.display}>{this.label(value)}</button>
        {!show ? null :
          <ul>
            {this.keys.map((e: string, i: number) => (
              <li key={i} onClick={() => this.change(i)}>{e}</li>)
            )}
          </ul>
        }
      </div>
    )
  }
}

它按预期工作。我可以设计它(万岁!)。

我从 value 参数中获取选定的值。我想知道是否可以通过 onChange 事件获取它？所以它的行为更像是原生选择。

附注

这是它的样式(在手写笔中)，以防需要

.select
  display: inline-block
  position: relative
  background: white
  button
    border: .1rem solid black
    min-width: 4rem
    min-height: 1.3rem
  ul
    position: absolute
    top: 100%
    border: .1rem solid black
    border-top: 0
    z-index: 100
    width: 100%
    background: inherit
    li
      text-align: center
      &:hover
        cursor: pointer
        background: grey

谢谢

Answer 1

作为 props 的一部分，传入更改回调。在change中，调用回调并传入新值:

type SelectProps = {
  select: {
    onChange: any, // change callback
    value: any,
    options: {
      [k: string]: any
    }
  }
}

...
...

change = (i: number) => {
  this.setState({ show: false })
  this.props.select.value = this.props.select.options[this.keys[i]]
  this.props.select.onChange(this.props.select.value); // call it
}

然后你可以在输出时传递你的更改回调:

let s = {
    value: '2',
    options: {
        '1' : 'one',
        '2' : 'two'  
    },
    onChange : function(val){
        console.log("change to " + val);
    }
};

return (
     <Select select={s} />
);