标签: react-functional-component

我有一个输入字段，我通过 onKeyUp 处理输入（因为我需要访问event.which）。这很有效，因为我只是通过获取输入的内容，event.target.value但是当我尝试重置输入字段的值时遇到了问题。

我正在使用功能组件，因此无法通过 refs 访问输入，我使用 useRef 找到的所有示例仅展示了如何聚焦输入字段，而不是如何清除它。

我忘了提到我正在使用 Material-UI。

在下面的单页案例中如何在组件之间切换？理想情况下，当您单击menu-item关联组件时，将显示相关组件而其他组件将隐藏。

反应

import React, { useState } from 'react';
import About from "./components/About";
import Projects from "./components/Projects";
import Contact from "./components/Contact";

const App = () => {
    // Toggle state(s) here?

    // Toggle function(s) here?

    return (
        <div className="nav">
            <ul className="menu">
                <li className="menu-item">About</li>
                <li className="menu-item">Projects</li>
                <li className="menu-item">Contact</li>
            </ul>
        </div>
        <div className="container">
            <About />
            <Projects />
            <Contact />
        </div>
    )
};

export default App;

我目前正在使用 Swiper 编写一个用于简单幻灯片放映的 React 应用程序，一切正常。我现在试图通过使用 setActiveSlide 函数显示当前幻灯片来改进导航。第一次加载后，它工作正常。单击调用 setActiveSlide 的按钮后，故事对象将设置为 null，这会导致在您第二次单击“上一个”或“下一个”按钮时出现错误（Uncaught TypeError: Cannot read property 'slideNext' of null）。为什么调用setActiveSlide后story对象设置为null？请帮忙

这是应用程序的简化版本

import React, { useState, useEffect, useRef } from "react";
import Swiper from "swiper";

const Slideshow = props => {
    var swiper = useRef();
    var story = null;
    const [activeSlide, setActiveSlide] = useState("");

    useEffect(() => {
        story = new Swiper(swiper.current, {
            loop: false,
            speed: 1100
        });
    }, []);

    const prevSlide = () => {
        setActiveSlide("PREV");
        story.slidePrev();
    };

    const nextSlide = () => { …

在 ReactJS 中，我正在编写一个无状态组件；
因为我读过避免不必要的状态是最佳实践。

该组件代表一个输入字段，当输入框包含一个值时，它会执行一个函数。

    export const InputField = (props) => {
      
      const InputFieldContentsChanged = (event) => {
        props.onChange(event.target.value);
      };

      return (
        <div data-component="input-field"
          className={(props.value !== "" ? "value": "")}>
          <input type={props.type} value={props.value} onChange={InputFieldContentsChanged} />
          <span className="bar"></span>
          <label>{props.label}</label>
        </div>
      );
    };

    InputField.PropTypes = {
      type: PropTypes.oneOf([ "text", "password" ]).isRequired,
      label: PropTypes.string.isRequired,
      value: PropTypes.string,
      onChange: PropTypes.func.isRequired
    }

现在，我创建了另一个组件，它只是测试上述组件的示例。如下所示：

    export const SampleComponent = (props) => {
      
      let componentUsername = "";
      
      const onUsernameChanged = (username) => {
        componentUsername = username;
      };
      
      return ( …

React Slick 有很好的例子来说明如何让它运行，但是这个是在类组件中，任何关于如何在使其成为功能组件时修复它的想法

https://react-slick.neostack.com/docs/example/as-nav-for

import React from "react";
import Slider from "react-slick";

export default function SyncSlider() {
  const [nav1, setNav1] = React.useState(null)
  const [nav2, setNav2] = React.useState(null)
    let slider1 = []
    let slider2 = []

    React.useEffect(() => {
        setNav1(slider1)
        setNav2(slider2)
    }, [slider1, slider2])

    return (
      <div>
        <h2>Slider Syncing (AsNavFor)</h2>
        <h4>First Slider</h4>
        <Slider
          asNavFor={nav1}
          ref={slider => (slider1 = slider)}
        >
          <div>
            <h3>1</h3>
          </div>
          <div>
            <h3>2</h3>
          </div>
          <div>
            <h3>3</h3>
          </div>
          <div>
            <h3>4</h3>
          </div>
          <div>
            <h3>5</h3>
          </div>
          <div>
            <h3>6</h3>
          </div>
        </Slider>
        <h4>Second Slider</h4> …

在反应中，我使用功能组件，并且有两个函数（getBooks）和（loadMore）

getBooks从端点获取数据。但是，当我loadMore在函数内单击按钮调用getBooks函数（loadMoreClicked）时，即使在延迟（5秒）调用它之后，它也不会更改它使用以前的状态。但是当我loadMore再次打电话时，状态发生了变化，一切正常。

有人可以解释为什么初始调用 (getBooks) 时的 (loadMoreClicked) 即使在 5 秒延迟后调用它也没有更新。

function component() {
  const [loadMoreClicked, setLoadMore] = useState(false);
  const getBooks = () => {
    const endPoint = `http://localhost/getBooks`; //this is my end point
    axios
      .get(endPoint, {
        params: newFilters
      })
      .then(res => {
        console.log(loadMoreClicked); //the (loadMoreClicked) value is still (false) after (5 sec)
      })
      .catch(err => {
        console.log(err);
      });
  };

  const loadMore = () => {
    setLoadMore(true); //here i am changing (loadMoreClicked) value to (true) …

我已经为此摸不着头脑有一段时间了，我想知道为什么我的状态不会更新。我已经编写了一个功能组件，我知道我缺少一些小东西，但我不知道是什么。

目标是更新包含已选中框名称的数组（从输入复选框更新）。这是我的代码

export default function Projects(props) {
  const [checkedBoxes, setCheckedBoxes] = useState([]);

  const onCheck = box => {
    let boxes = [...checkedBoxes];
    console.log(`Checking box ${box}`);
    if (document.getElementById(box).checked) {
      console.log(`Box checked`);
      //Add box
      boxes.push(box);
    } else {
      console.log(`Removing box`)
      //Remove box
      let index = 0;
      for (let i = 0; i < boxes.length; i++) {
        if (boxes[i] === box)
          index = i;
      }
      boxes.splice(index, 1)
    }
    console.log(`Boxes is now ${boxes}`)
    setCheckedBoxes(boxes);
    console.log(`Checked boxes is now: ${checkedBoxes}`)
    console.log(`Boxes length: ${boxes.length}`)
    console.log(`Checked boxes …

我正在尝试导出在函数中生成的数组，以便我可以在我的主要组件中使用它。我有以下代码：-

子组件：-

import { useState, useEffect } from 'react';

const DeckFootball = () => {
    const [ fullDeck, setFullDeck ] = useState([])

    useEffect(() => {
        generateDeck()
    }, [deck])

    const deck = []
    const deckLimits = {
        joker: 4,
        goalkeepers: 12,
        defenders: 12,
        midfielders: 12,
        attackers: 12,
      }

      const generateDeck = () => {
        for (let i = 0; i < deckLimits.joker; i++) {
          generateCard("joker")
        }
        for (let i = 0; i < deckLimits.goalkeepers; i++) {
          generateCard("goalkeeper")
        }
        for (let i …

当我搜索有关复合组件模式的文章时，我发现可以像 javascript 对象一样通过点表示法访问子组件。

这怎么可能以及它是如何运作的？这是否有效，因为组件也是 javascript 的对象？

const App = () => (
  <Menu>
    <Menu.Item>Home</Menu.Item>
    <Menu.Item>Blog</Menu.Item>
    <Menu.Item>About</Menu.Item>
  </Menu>
);

我想调度一个取决于功能组件中先前设置的状态的操作。我有什么选择？

<Buton 
  onPress={() => {
  setState(state + 1);
  dispatch(myAction(state));
        }}
/>

编辑：为了清楚起见，我的意思是调度状态取决于之前设置的状态。在伪代码中：

async () => {
   await setState(state + 1);
   dispatch(myAction(state));
}