Onchange 挂钩以使用下拉列表更新绘图中的数据？

问题描述

我创建了一个下拉菜单，其中有几个选项供用户选择他们想要在渲染图上看到的单位格式。Dropdown and plot

我找不到更新绘图数据的方法，因此当用户选择下拉列表中的格式到 y 轴上的绘图编号时，数据会发生变化。

这是我目前的代码：

 export const Chart = ({plotData}) => {
  const [format,setFormat] = useState('')
  const onChange = (e) =>{
    setFormat(e.prevNum.value);
  }


  let pressureIndex = Array.from(
    {length: plotData[0].pressureData.length},(_,i) => i + 1
  )

  const pressureLayout = {
    ...baseLayout,yaxis: {
      title: {
        text: 'Pressure at MS wellbore (Pa)',},}

  function ChangeFormat(num,flag) {
    if (num >= 1000000000 && flag === 'G') {
       return (num / 1000000000).toFixed(1).replace(/\.0$/,'') + 'G';
    }
    if (num >= 1000000 && flag === 'M') {
       return (num / 1000000).toFixed(1).replace(/\.0$/,'') + 'M';
    }
    if (num >= 1000 && flag === 'K') {
       return (num / 1000).toFixed(1).replace(/\.0$/,'') + 'K';
    }
    return num;
}

const changeFormat = (num,exp="K",prec=1) => `${(num/{K:1000,M:1000000,G:1000000000}[exp])
  .toFixed(prec)
  .replace(/\.0$/,'')}${exp}`;


  plotData.forEach((data) => {
    pressureData.push({
      y: data.pressureData.map(prevNum => prevNum /10e6),x: pressureIndex,type: 'scatter',mode: 'lines',marker: randomColor({hue: 'red',count: pressureIndex}),name: data.tag,})
  })

  pressureData.map(prevNum => prevNum)

  const test = pressureData.map(prevNum => prevNum)
  console.log(pressureData,"this is a test")

  return (
    <>
    <Form>
    <Dropdown
    name={'unit format'}
    label={'Unit Format'}
    choices={{
      Pascals: 'Pascals',Megapascals: 'Megapascals',Gigapascals: 'Gigapascals',Kilopascals: 'Kilopascals',}}
    tip={'Select a unit to format'}
    />
    </Form>
    <Plot onChange={onChange} format={format} data={pressureData.map(prevNum => prevNum)} layout={pressureLayout} />
    </>
  )
}
export default Chart

下拉组件：

const Dropdown: FunctionComponent<DropdownProps> = (props) => {
  const {
    label,required,placeholder,name,register,rules,choices,onChange,tip,} = props

  const [error,setError] = useState<string>()
  const [showTip,setShowTip] = useState<boolean>(false)

  const dropdown = (
    <div className={'form__field'}>
      {label && <Formlabel text={label} forID={name} />}

      <select
        id={name}
        className={'form__dropdown'}
        name={name}
        defaultValue={placeholder}
        required={required}
        onChange={onChange}
        ref={register({
          ...rules,})}>
        {placeholder && <option value={''}>{placeholder}</option>}

        {Object.entries(choices).map(([key,value],i) => {
          return (
            <option key={i} value={key}>
              {value}
            </option>
          )
        })}
      </select>
    </div>
  )

  return (
    <>
      <div className={'form__dropdown_wrapper'}>
        {dropdown}
        {tip && <ToolTip onClick={() => setShowTip(true)} />}
      </div>

      {showTip && <div className={'form__field_tip'}>{tip}</div>}
      {error && <div className={'form__error'}>Error</div>}
    </>
  )
}

Dropdown.defaultProps = {
  required: false,placeholder: '',}

type DropdownProps = {
  name: string,label?: string,required?: boolean,placeholder?: string,rules?: object,register?: any,choices: object,onChange?: any,tip?: string,}

export default Dropdown

它不会更新。我做错了什么？

解决方法

你好吗？ 我认为问题是因为您没有将 onChange 附加到 DropDown 组件。尝试将其更改为：

<>
    <Form>
    <Dropdown
    name={'unit format'}
    label={'Unit Format'}
    choices={{
      Pascals: 'Pascals',Megapascals: 'Megapascals',Gigapascals: 'Gigapascals',Kilopascals: 'Kilopascals',}}
    tip={'Select a unit to format'}
    />
    </Form>
    <Plot onChange={onChange} format={format} data={pressureData.map(prevNum => prevNum)} layout={pressureLayout} />
    </>

到：

<>
    <Form>
    <Dropdown
    name={'unit format'}
    label={'Unit Format'}
    choices={{
      Pascals: 'Pascals',}}
    tip={'Select a unit to format'}
    onChange={onChange}
    />
    </Form>
    <Plot format={format} data={pressureData.map(prevNum => prevNum)} layout={pressureLayout} />
    </>

请注意，我从 Plot 组件中删除了 onChange 到 DropDown 组件，您可能会尝试聆听该组件。

编辑 1：

尝试将您的 onChange 事件更改为：

const onChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
   setForm(e.target.value)
}

据我所知，您的 onChange 方法无法正确恢复新 DropDown 的选定值。