首頁(yè) 猿問我無法在條件渲染上正確使用useE...

我無法在條件渲染上正確使用useEffect讀取輸入

JavaScript

蝴蝶不菲 2019-04-18 10:15:25

我正在嘗試使用“靜態(tài)”模式創(chuàng)建輸入組件。在此模式下，輸入將被包含輸入值的范圍替換。在這個(gè)問題中，我使用范圍輸入。import React from 'react';import ReactDOM from 'react-dom';const { useState, useEffect, } = React;const RangeInput = ({ inputID, min, max, defaultValue, children,}) => { const [valueAfterStaticChange, setValueAfterStaticChange] = useState( defaultValue ); const [isStatic, setIsStatic] = useState(false); useEffect( () => () => { // do this before component unmounts and when 'isStatic' changes, // but only when 'isStatic' is true isStatic || setValueAfterStaticChange(document.getElementById(inputID).value); }, [isStatic] ); return ( <div> <label htmlFor={inputID}>{children}</label> <span style={{ display: isStatic || 'none', }}> {valueAfterStaticChange} </span> <input type="range" min={min} max={max} defaultValue={valueAfterStaticChange} id={inputID} style={{ display: isStatic && 'none', }} /> <button onClick={() => { setIsStatic(!isStatic); }} > Toggle Static </button> </div> );};ReactDOM.render( <RangeInput inputID="myID" min={0} max={100} defaultValue={50}> My Range Input </RangeInput>, document.getElementById('root'));上面的代碼有效。但它display: none用來模擬'無渲染'。我以為我可以使用以下邏輯完成實(shí)際的卸載：// all unchanged until... return ( <div> <label htmlFor={inputID}>{children}</label> {isStatic ? ( <span>{valueAfterStaticChange}</span> ) : ( <input type="range" min={min} max={max} defaultValue={valueAfterStaticChange} id={inputID} /> )} <button onClick={() => { setIsStatic(!isStatic); }} > Toggle Static </button> </div> );};不知怎的，我的useEffect返回函數(shù)在它實(shí)際卸載時(shí)不會(huì)正確讀取輸入。我認(rèn)為使用return函數(shù)useEffect會(huì)導(dǎo)致函數(shù)在組件卸載之前運(yùn)行。我究竟做錯(cuò)了什么？

查看完整描述

2 回答

汪汪一只貓

TA貢獻(xiàn)1898條經(jīng)驗(yàn) 獲得超8個(gè)贊

除非在卸載時(shí)有理由獲得該值，否則您可能只是在更改時(shí)跟蹤該值。那樣你根本不需要useEffect：

const RangeInput = ({ inputID, min, max, defaultValue, children }) => {
  const [value, setValue] = useState(defaultValue); // <-- keep track of value
  const [isStatic, setIsStatic] = useState(false);
  return (
    <div>
      <label htmlFor={inputID}>{children}</label>
      {isStatic ? (
        <span>{value}</span>
      ) : (
        <input
          type="range"
          min={min}
          max={max}
          defaultValue={value}
          onChange={e => setValue(e.target.value)} // <-- Set value onChange
          id={inputID}
        />
      )}
      <button
        onClick={() => {
          setIsStatic(!isStatic);
        }}
      >
        Toggle Static
      </button>
    </div>
  );};

反對(duì) 回復(fù) 2019-05-17