reactjs

问题 I was trying to implement a simple paint component with React hooks. My expected behavior was 'mouseMove' to be executed when I moved my mouse while remaining clicked. However, state.isMouseDown always returned false within mouseMove(). Any fixes or references to potentially helpful documents would be grateful. const initialState = { isMouseDown: false, isMouseMoving: false }; const DrawingCanvas = () => { const [state, setState] = useState(initialState); useEffect(() => { console.log(

问题 I'm having a little problem adding external javaScript file to my React App. I tried so many things but none of them worked. The last thing I did is: step#1 : creating JS file and create functions. step#2 : import the functions form my js file. step#3 : call the functions. The issue is when I run: npm start, everything work fine. But when I run: nom build, the script won't work! This is my js file that I created with exporting functions export function BackgroundMove() { $(document).ready

问题 I tried below code and while I was expecting to get a yellowish Hi, I got [object Object] instead. Is there a way to fix it? maybe using InputProps helps but unfortunately I couldn't find any detailed tutorial about it. <TextField id="outlined-multiline-static" label="Multiline" multiline fullWidth rows="22" value={<div> Hi <div style={{ color: "yellow" }}>There</div></div>} variant="outlined" /> Edit: I just simplified the problem and don't want the whole of the text to be yellow. https:/

问题 index.js import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import * as serviceWorker from './serviceWorker'; import { combineReducers, createStore } from 'redux' import { Provider } from 'react-redux' import productReducer from './reducers/product-reducers' import userReducer from './reducers/user-reducer' const allReducers = combineReducers({ products: productReducer, user: userReducer }) const store = createStore( allReducers, {

问题 i am trying to send data of the user from react to express and use the create function to create a new user but is says error 404 and page not found why? my api endpoint (found in client/src/components/api-users : async function create (data) { try { const resp = await fetch('/api/signup/' , { //error initiating here method:'POST', mode:"cors", credentials:'include', headers:{ 'Content-Type': 'application/json ', 'Accept': 'application/json', "Access-Control-Origin": "*" }, body:JSON

问题 I am using primereact dropdown component https://primefaces.org/primereact/showcase/#/dropdown But getting this warning:- react_devtools_backend.js:2450 Warning: Encountered two children with the same key. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version. in ul (created by DropdownPanel) in div (created by DropdownPanel) this

问题 I am using primereact dropdown component https://primefaces.org/primereact/showcase/#/dropdown But getting this warning:- react_devtools_backend.js:2450 Warning: Encountered two children with the same key. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version. in ul (created by DropdownPanel) in div (created by DropdownPanel) this

问题 I know we can use to wrap our components but what is the way to route to a new page on click of a button in React functional components? 回答1: Try this, React Router has now useHistory hook for functional components: Docs: https://reacttraining.com/react-router/web/api/Hooks/usehistory import { useHistory } from "react-router-dom"; function HomeButton() { let history = useHistory(); function handleClick() { history.push("/home"); } return ( <button onClick={handleClick}> Navigate </button> );

问题 I'm trying to setup CSRF tokens so that I can do a number of checks before issueing a token to the client to use in future requests. Taking the guidance from the csurf documentation, I've setup my express route with the following: const express = require('express'); const router = express.Router({mergeParams: true}); const csurf = require('csurf'); const bodyParser = require('body-parser'); const parseForm = bodyParser.urlencoded({ extended: false }); const ErrorClass = require('../classes

问题 I've started using Flow type on top of a project created with create-react-app tool. I struggle to make a simple scenario work where a class property is filled with element reference in render method but throws 2 errors. What am I doing wrong? All the checks should prevent those warnings. class MyComponent extends React.Component<*> { input: ?HTMLInputElement; componentDidUpdate = () => { if (this.input) { this.input.focus(); if (this.input.value) { const valueLength = this.input.value.length