Блог

Главная - Вопросы по программированию - Передача логического значения с помощью функции события стилизованному компоненту

Передача логического значения с помощью функции события стилизованному компоненту

#javascript #reactjs #typescript #styled-components

Вопрос:

У меня есть стилизованный входной компонент, например

  <InputFields isFilled={e=>SignInData[e.target.name]!==''} type="text" name="Username"  onBlur={e=>handleChange(e)} />

Как вы можете видеть, я передаю пользовательскую опору, заполненную в моем компоненте. В настоящее время это не работает, потому что мне требуется логическое значение в моем интерфейсе в стилизованном компоненте, и если я попытаюсь передать логическое значение, я не смогу использовать событие(e=>***) или около того. Есть ли какой-нибудь способ, которым я могу указать своему стилизованному компоненту проверить имя моего компонента и использовать его для проверки ключа в значении моего состояния. Я также открыт для любых лучших предложений по передаче логического значения, если входные данные пусты, в мой компонент более удобным способом.Кроме того, вот мои государственные кураторы.

   const [SignInData, setSignInData] = useState({Username:'',Password:''}as StringKeyValue)
  const [Update,setUpdate] = useState(false)
  const handleChange:CallableFunction = (e: React.ChangeEvent<HTMLInputElement>) => {
    SignInData[e.target.name]=e.target.value
    setSignInData(SignInData)
    setUpdate(!Update)
  }
  useEffect(() => {}, [Update])

Комментарии:

1. Мне потребовалось много мужества, чтобы снова задать вопрос о стеке. Я очень новичок в этом деле, пожалуйста, полегче со мной. И я также в настоящее время просто не использую атрибут name и прямо использую isFilled={SignInData. Имя пользователя!==»} и оно отлично работает. Просто хотел более универсальный и короткий компонент.

2. Я не уверен, что вы пытаетесь здесь сделать, поэтому вы хотите передать опору своему пользовательскому компоненту <InputFields>, сообщив ему, является ли его текущее значение пустой строкой или нет?

3. Да, именно это я и хочу сделать, чтобы оно работало на меня, когда я его жестко закодирую, но я хочу динамически передавать значение(и что-то, что можно использовать более универсально), поскольку мои компоненты в любом случае перезаписываются всякий раз, когда изменяется какой-либо ввод.

4. в вашем пользовательском компоненте у вас будет что-то вроде этого <входное значение={переменная} onChange={handleChange}/>, где переменная является либо локальным состоянием компонента, либо реквизитом, исходящим от его родительского компонента. В любом случае вместо передачи реквизита под названием isFilled вы бы использовали значение переменной внутри вашего пользовательского компонента вместо isFilled. Я не уверен, что во мне был смысл, поэтому покажите весь свой код компонента, если хотите, чтобы я подробнее рассказал

5. Да, я полностью понимаю, что вы имеете в виду, поэтому мне все равно нужно указать значение ключа для каждого ввода. Я просто хотел, чтобы атрибут name, который я уже пишу для ввода, использовался в качестве ключа для доступа к значению в моем состоянии.

Метки: