实际上，我尝试验证表单并卡住以验证密码并确认密码。是否有任何属性useForm可以验证密码并在最新版本中以反应挂钩形式显示消息。请帮忙。实际上，我尝试验证表单并卡住以验证密码并确认密码。是否有任何属性useForm可以验证密码并在最新版本中以反应挂钩形式显示消息。请帮忙。

import React, { useState } from 'react'
import Image from '../../../Components/UI/Images/Image'
import SubmitButton from '../../../Components/UI/Button/Button'
import {useForm} from 'react-hook-form'
import illustrate from '../../../Assets/Imagesused/resetpass.png'
import '../Login/Login.css'
import "./CreatePass.css"
import "../ChangePassword/ChangePass.css"

const CreatePass = () => {

//show password
const [toggle1, setToggle1] = useState(false);
const [toggle2, setToggle2] = useState(false);
let password;

const { register, handleSubmit, formState: { errors }, reset,watch,getValues } = useForm({
    mode: "onTouched"
});
password = watch("password", "");

const onSubmit = (data) => {
    
    console.log(data); …

我正在尝试找到一种创造性的方法来使用SectionList节标题嵌套 s 。这是基本设置：

<SectionList
  sections={this.sectionData}
  stickySectionHeadersEnabled
  renderItem={({ item }) => (
    <SectionList
      sections={_.groupBy(item, data => data.date)}
      stickySectionHeadersEnabled
      renderItem={({ item }) => this.renderData(item)}
    />
  )}  
/>

虽然此设置渲染良好，但内部部分标题不会粘贴，可能是由于该特定部分SectionList没有定义的高度，因此列表不“知道”粘贴在哪里。

这是一个屏幕截图，其中灰色标题粘住，但白色标题没有粘住。

我正在绞尽脑汁寻找一种聪明的方法来实现这一点，但目前想不出任何办法。任何帮助或见解将不胜感激！

我正在编写一个扩展程序以从网站下载视频。该网站有mp4文件和m3u8文件。我已经实现了直接下载mp4文件的部分。我坚持将m3u8文件转换为mp4. 我尝试了很多js包，但是有很多依赖项，即使使用后也失败了browserfy。

当前的 popup.js 文件

function loadvideoList(callback){
    chrome.storage.sync.get(['courseID'], function(result) {
        if(result.courseID != 'undefined'){
            $.ajax({
                type: 'GET',
                url: "http://localhost:80/get_videos_list/"+result.courseID,
                crossDomain: true,
                success: function(response) {
                    document.getElementById("loading_icon").style.display='none';
                    document.getElementById("videos_list").style.display='block';
                    document.getElementById("videos_list").style.padding='10px';
                    for(var i = 0; i < response.video_list.length; i++){
                        if(response.video_list[i].type == 'mp4'){
                            handleDownloadButton(response.video_list[i]);
                        }else{
                            // ************ HERE ***************
                            handleDownloadButton-m3u8Tomp4(response.video_list[i].video_url)
                        }
                    }
                },
                error: function (err) {
                    alert("unexpected error occured: "+err.code);
                    console.log(err);
                }
             });
        }else{
            document.getElementById("videos_list").style.display='none';
            document.getElementById("videos_list").style.padding='0';
        }
    });
}

function handleDownloadButton(json_vid){
    var node …

我还是个新手React，MUI所以请饶我一命。我正在学习使用复选框构建多个选择选项，并且我已经从数组中填充了下拉选项。

我还设置了初始/默认状态选项。初始/默认状态选项（Nintendo 和 XBoX）显示在主输入选择字段中，但不幸的是没有在下拉复选框中选中标记，如下面的屏幕截图所示。

截图1

我想要实现的是这样的（默认状态下所有选定的选项（Nintendo 和 XBoX）都显示在初始页面加载时的复选框上）：

截图2

这是我在https://stackblitz.com/edit/react-rahqrq?file=demo.js中的实时演示编码

我很困惑，除了来自州的默认初始选项外，我可以勾选下拉列表中的所有其他选项复选框。它无法点击且无法更改，我不知道为什么。非常感谢任何提示和线索，提前致谢，请原谅我糟糕的语法和最诚挚的问候。

import * as React from 'react';
import OutlinedInput from '@mui/material/OutlinedInput';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import ListItemText from '@mui/material/ListItemText';
import Select from '@mui/material/Select';
import Checkbox from '@mui/material/Checkbox';

const ITEM_HEIGHT = 48;
const ITEM_PADDING_TOP = 8;
const MenuProps = {
  PaperProps: {
    style: {
      maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
      width: 250,
    },
  },
};

const variants = …

抱歉，我只是问一个基本问题，但我有点卡住在这里寻找在做出选择后从 React Select 获取值的任何方法。

这是一个简单的选择设置。

    const selectOptions = [
            { value: 'YES', label: 'Set to Active' },
            { value: 'NO', label: 'Set to Mute' }
       ]

    <Label className='form-label'>Select</Label>
         <Select
            isClearable={false}
            className='react-select'
            classNamePrefix='select'
            options={selectOptions}
            theme={selectThemeColors}
          />

我想根据用户选择的选择获取价值，并将其放入userChoice使用的内容中useState。

const [userChoice, setUserChoice] = useState("")

值可以是 YES 或 NO，如 selectOptions 中所定义。但如何将其传递给 userChoice. 我尝试使用onChange={(e) => setUserChoice(e.target.value)} 但这东西不起作用。

还onInputChange={handleInputChange}按照 StackOverflow 上先前询问的线程中的建议进行了尝试，但在这里不起作用。

我正在尝试创建一个表组件，该组件将为其特定子组件提供一些特殊的类名。

    const BasicTable = ({ children }) => {
        const RenderChild = Children.map(children, (el) => {
            const child = el;
    
            if (child !== null) {
                if (child.props.originalType !== "th") {
                    return <child.type {...child.props} className="th" />;
                }
    
                return <child.type {...child.props} />;
            }
            return null;
        });
    
        return (
            <div className="table-responsive">
                <table className="table w-full bg-transparent">{RenderChild}</table>
            </div>
        );
    };

这是我的组件，我想像这样使用它。

    <BasicTable>
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Position</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>dsfa</td>
                <td>dsfa</td>
                <td>dsfa</td>
                <td>dsfa</td>
            </tr>
        </tbody>
    </BasicTable>

但这里的问题是我的Children.map函数仅循环其直接子级。如何将 props 传递给其嵌套子级（th、td、...等）

我有条件地渲染一些组件，但我想知道是否有更有效的方法（例如，使用 switch case）：

     export const Culture = () => {
      const { query } = useRouter();
      const currentSection = query.section || "";
      return (
        <div className="content">
          <Navigation
            className={currentSection !== "" ? "sub_nav" : "sub_nav active_menu"}
            category="culture"
          />
          {currentSection === "" && <CultureCulture category="cultureCulture" />}
          {currentSection === "elephant" && (
            <CultureCulture category="cultureElephant" />
          )}
          {(currentSection === "espace-musee" ||
            currentSection === "quebecor-gallery") && (
            <CultureCulture category="cultureGallery" />
          )}
          {currentSection === "culture-d-ici" && (
            <CultureCulture category="cultureIci" />
          )}
          {(currentSection === "bilan-culturel" ||
            currentSection …

我曾经CKEditor从管理面板编写内容和嵌入视频。

现在，我想显示HTML带有嵌入视频的内容以对前端做出反应。

什么工作？

目前所有HTML内容都正确显示

<div dangerouslySetInnerHTML={{__html:DOMPurify.sanitize(HTMLDATA)}}></div>

但视频内容不显示。 HTML为了VIDEO

<figure class=\"media\"><oembed url=\"https://vimeo.com/643169446\"></oembed></figure>

如何实现这一目标？

我们有一个带有翻译的 Formik 表格。初始值如下所示：

{
  // other stuff here like id, createdAt, etc.
  translations: [
   {
     languageCode: 'de',
     name: 'German',
   },
   {
     languageCode: 'fr',
     name: 'French',
   },
   {
     languageCode: 'it',
     name: 'Italian',
   }
  ]
}

selectedLanguage等于当前选择的语言 'de' | 'fr' | '它'。然后我们循环并availableLanguages为每个字段创建和输入字段，如下所示：

{
    languages.map((lang, ind) => (
        <div key={ind}>
            {selectedLanguage === lang && (
                <FormField>
                    <Input
                        name="Topic"
                        value={
                            values.translations?.find(
                                elm => elm.languageCode === lang
                            )?.name || ""
                        }
                        onChange={(v: React.ChangeEvent<HTMLInputElement>) => {
                            // Doesn't work
                            setFieldValue(
                                `${
                                    values.translations?.find(
                                        elm …