React:按钮不工作(onClick) -应该传递给index.js，但什么也没有发生
React是一个用于构建用户界面的JavaScript库。它是由Facebook开发并开源的，并已成为前端开发中非常流行的框架之一。
对于按钮不工作(onClick)而没有任何反应的情况，可能有多种原因导致。以下是一些可能的原因和解决方法：
- 检查事件处理函数是否正确传递给按钮的onClick属性。确保没有拼写错误或其他语法错误。例如，确保正确使用了箭头函数或绑定函数。
- 确保按钮被正确渲染并且可见。可以检查按钮的样式和布局是否正确，确保没有其他元素或样式覆盖了按钮。
- 检查是否有其他事件监听器或事件捕获器阻止了点击事件的传播。可以使用浏览器的开发者工具检查按钮是否正确注册了事件监听器，并且没有其他元素阻止了事件的传播。
- 如果使用了类组件，确保事件处理函数在组件实例中正确绑定。可以使用bind方法或箭头函数来确保事件处理函数绑定了正确的this上下文。
- 检查组件的层次结构，确保事件处理函数传递给了正确的组件。可以通过打印或调试来确认事件处理函数是否在正确的组件中被调用。
如果以上方法都没有解决问题，可以考虑以下几点：
- 检查React版本是否过旧或过新，可能与React版本不兼容导致的问题。可以尝试升级或降级React版本。
- 检查是否存在其他代码或库与React冲突，可能存在命名冲突或全局变量冲突导致的问题。可以尝试去除其他代码或库，只保留React相关的代码，看是否能解决问题。
推荐的腾讯云相关产品和产品介绍链接地址：
- 腾讯云云服务器（CVM）：提供高性能、可弹性伸缩的云服务器实例，适用于各种应用场景。详情请查看：https://cloud.tencent.com/product/cvm
- 腾讯云云函数（SCF）：无服务器计算服务，可以在没有服务器的情况下运行代码，弹性扩展、按需付费。详情请查看：https://cloud.tencent.com/product/scf
- 腾讯云云数据库MySQL版（CDB）：高性能、可扩展的关系型数据库服务，提供全面的数据存储和管理解决方案。详情请查看：https://cloud.tencent.com/product/cdb
相关·内容
嗨，现在我在一个我的投资组合网站上工作，我试图使一个按钮，使用相同的风格，但想要使用它的两个按钮(1)转到一些页面(2)下载简历。但它们都执行操作(1)。我不知道如何让这两个按钮做不同的工作。
这是Button的代码，
import React from 'react';
import './Button.css';
import { Link } from 'react-router-dom';
const STYLES =['btn--primary', 'btn--outline'];
const SIZE
浏览 2提问于2021-03-11得票数 0
我想添加按钮，通过点击哪个页面将滚动回顶部的动画。我知道如何使用JQuery来实现这一点。我试过这段代码：
import React, { Component } from 'react';
import $ from 'jquery';
import goUpNarrrowImage from '../static/img/goUpNarrow.png';
class GoTopButton extends Component {
constructor() {
super();
this.onclick = thi
浏览 25提问于2018-09-07得票数 4
回答已采纳
你好，我目前正在尝试学习React，并在本地中重写文档中的所有代码示例。我和，有麻烦
class LoginControl extends React.Component {
constructor(props) {
super(props);
this.handleLoginClick = this.handleLoginClick.bind(this);
this.handleLogoutClick = this.handleLogoutClick.bind(this);
this.state = {isLoggedIn: false};
}
浏览 1提问于2021-01-07得票数 2
回答已采纳
1回答
这是我第一次开发react应用程序。 我想在一个表格中显示5个按钮。我采用的第一种方法是用Table.js对其进行硬编码 Table.js
<Button hidden={controlButton} onClick={() => reprocessConfirmation()}>
Reprocess
</Button>{" "}
<Button hidden={controlButton} onClick={() => reprocessConfirmation(
浏览 20提问于2019-05-23得票数 0
1回答
我在我的react应用程序上创建了一个LogOut按钮组件。
如下所示：
import React, { Component } from 'react';
import PropTypes from 'prop-types';
export class LogOutButton extends Component {
static contextTypes = {
store: PropTypes.object.isRequired,
};
handleClick = () => {
this.context.sto
浏览 1提问于2018-10-28得票数 0
我一直在学习ReactJS，我编写了一个简单的程序，其中一些记录显示在一个列表中，每一条记录都可以通过单击其删除按钮来删除。在我的代码中有三个组件。“存储”调用“视图”组件显示记录，“视图”调用“操作”组件用于删除任何记录。
现在的问题是，当我按下删除按钮删除任何记录，我得到的Uncaught TypeError: Cannot read property 'deleteRecord' of undefined错误。所以请告诉我的代码中有什么问题吗？
错误：
Uncaught TypeError: Cannot read property 'deleteRecord&#
浏览 0提问于2017-09-27得票数 0
3回答
我尝试将状态播放从false更改为true，还尝试添加ComponentDidMount、ComponentDidUpdate、ComponentWillMount，但都没有效果。我在某个时候一直有个错误。
它的工作时，点击播放和暂停按钮，但我希望它自动播放后，2秒，当有人访问该网站。
我的代码：
import React from "react";
class Music extends React.Component {
constructor(props) {
super(props);
this.state = { play: false };
浏览 1提问于2019-02-06得票数 1
我不明白为什么当我点击我的应用程序中的链接时，什么也没有发生。
在我的index.js文件中，我正在加载名为“游戏”的主屏幕。在“游戏”中，我有两个链接，当点击时，应该会呈现另一个屏幕。
在我的index.js中：
import React from "react";
import ReactDOM from "react-dom";
import Game from "./Game/Game";
ReactDOM.render(
<React.Fragment>
<Game/>
</React.Fragm
浏览 13提问于2020-02-06得票数 0
回答已采纳
我有<input type="file" />，并希望在该输入上触发.click()。在chrome，firefox，edge中一切正常，但是safari中存在问题。 当我点击按钮触发inputFile.current.click()时-它起作用了。但是当它在useEffect/useLayoutEffect中发生时-它不起作用(我尝试添加超时，但也没有帮助)。 重现问题的工作示例：https://codesandbox.io/s/react-hooks-counter-demo-forked-49n2t?file=/src/index.js 尽可能少的代码来呈现
浏览 115提问于2021-03-24得票数 3
我试图使用React、Axios和movieDB API制作一个电影搜索函数。我现在正在尝试实现的功能是在搜索栏中键入一个电影，然后单击submit按钮将电影标题作为一个H1元素返回。
我的onClick函数不工作：<button onClick={(e)=>clickHandler()}>submit</button>
只有当页面刷新时，componentDidMount()才能工作，并且当submit按钮被破坏时，您无法搜索任何内容。
我不知道如何实现这一点，但我也不介意，如果我可以让它通过点击进入搜索，而不是使用一个按钮，无论哪个更容易。
到目前为止这是我的
浏览 0提问于2020-06-09得票数 0
回答已采纳
2回答
我试图在按下按钮时生成一个随机的用户信息，并在按钮上方显示该信息。在ProfilePanel.js中，我创建了一个头像和用户常量，它们将用来显示信息。在index.js中，头像常量可以做到这一点，因为它不需要使用按钮。然而，对于用户常量，它不起作用。在下面的代码中，我正在获取一个api数据来显示用户名，但是它没有显示任何东西，我不确定哪里出了问题，是Button.js还是index.js出了问题。我怎么才能修复它呢。有人能帮帮我吗？谢谢。
<Button title="name" >
<p key={contact.name} user={contact.na
浏览 0提问于2018-06-08得票数 1
将显示计数器当前值的react组件。
计数器应该从0开始。应该有一个添加1的按钮，也应该有一个减去1的按钮。
我无法理解这个问题，不知道我错过了什么或者错误的语法。
const React = require('react');
class Counter extends React.Component{
constructor(...args){
super(...args);
this.state = { counter: 0 };
}
// Your event handlers
cincrement = () => {
t
浏览 0提问于2019-01-06得票数 0
回答已采纳
2回答
我已经创建了一个react父组件，它将一些道具传递给它的子组件，并持有一个onClick函数。当单击产品组件时，onClick函数应该console.log‘working’，这不起作用，控制台上也没有出现任何东西。我不知道我错在哪里，这应该很简单。我是不是犯了一个我一直漏掉的愚蠢的错误？
下面是我的父组件代码：
import React from 'react';
import { connect } from 'react-redux';
import Product from '../components/product.js';
impo
浏览 22提问于2017-12-18得票数 1
回答已采纳
首先，我必须说，我已经查看了这个站点上所有的“向子组件传递函数”，但没有找到解决问题的方法。我有一个父类：
import React from 'react';
import $ from 'jquery';
import Project from './Project';
import NewProjectModal from './NewProjectModal';
/**
* A projects menu
*/
class ProjectsMenu extends React.Component
{
constr
浏览 7提问于2018-01-01得票数 1
回答已采纳
1回答
我有以下反应脚本(index.js & app.js)。我对三个问题感到困惑：
在index.js脚本中，为什么{count++}不递增，而{count=count+1}不递增？我以为他们是一样的。
在app.js脚本中，我对它所指的是什么感到困惑：
<button onClick={this.addOne.bind(this)}>increment</button>
我认为第一个是指App并得到了addOne方法，其中绑定( this )指的是单击事件。请注意，在呈现()下面有var self=this。如果我用self替换按钮语句中的任何一种或两种，它仍然有
浏览 1提问于2018-03-25得票数 0
回答已采纳
1回答
通过ejs模板执行函数
、、、、
我正在使用node.js制作一个web应用程序。我正在通过Express处理服务器端，并使用ejs模板来服务网页。我的问题是，我的index.js文件中有一个函数，它在按钮的onclick事件中在ejs文件中引用。目前，我只在控制台中记录一条语句，以确保其工作正常。现在，每当我重新启动服务器并打开我的主路由时，我都会看到登录到控制台的消息，但是当我单击实际按钮时，什么也不会发生。该功能在服务器启动/重新启动时执行，但在单击按钮时不执行。我尝试使用正确的ejs语法和标记将函数完全写入ejs页面中。每次发生相同的问题时，该函数都会在刷新主页并将消息记录在控制台中时执行，但单击按钮时不会发生任何事情
浏览 3提问于2020-10-17得票数 2
回答已采纳
我阅读了一些关于React的介绍，并想要制作一个简单的应用程序，在标题组件中有一个按钮，这决定了主应用程序是否应该显示侧边栏。按钮在标题中设置变量showSidebar，我希望在主组件中再次读取它。为了简洁起见，实际显示侧边栏的代码被去掉。
我是index.js
import React, { useState } from "react";
import ReactDOM from "react-dom";
import Header from "./header";
import "./styles.css";
funct
浏览 0提问于2019-07-12得票数 1
回答已采纳
1回答
我基本上是试图显示一个按钮的数字(初始值1)，当你点击那个按钮，数字增加一个。我有两个组件，一个主应用程序组件和一个按钮组件。向Button组件传递一个更新数字的函数。但是当我加载所有这些时，它会给我一个错误：
TypeError: this.state is null
render
src/Button.js:6
export class Button extends React.Component {
render() {
return (
> <button onClick={this.props.onClick}>
{this.state.count
浏览 0提问于2019-05-03得票数 0
回答已采纳
1回答
自动计数器显示意外行为
、、、
我有两段代码，如下所示。
第一个是显示当前时间的时钟，每秒更新一次。它工作得很完美！
第二个是非常相似的代码，但它不是显示当前时间，而是一个每秒递增的计数器。
这是我们可以看到意想不到的行为的地方，因为它在前几秒是正常的，但从第二个4或5秒(实际上它可能从第一秒开始发生，但从第四、第五秒开始可见)，它开始相当快地显示所有先前的值(秒)……当我们到达大约10秒时，甚至不可能看到这些值。
请注意，如果我去掉了"setInterval“函数，并单击按钮手动递增这些值，它就会按预期工作(我们在屏幕上只看到递增的值)。
可能会发生什么？我是个新手，非常感谢大家的帮助。)
代码1：
import
浏览 0提问于2020-04-30得票数 0
1回答
因此，我有一段代码，其中Header.jsx文件中有一个按钮，一旦单击，它将显示Notification.jsx文件的内容。这里的问题是，我不知道如何在index.js中显示index.js的内容。我尝试使用条件语句，但没有效果，单击按钮后是否可以隐藏h1元素？
Header.jsx
import React from "react";
import { Button } from "@mui/material";
import { IconButton } from "@mui/material";
import NotificationsIc
浏览 10提问于2022-03-15得票数 1
对于典型的react函数，在事件中调用该函数(例如onClick={})将导致在组件挂载时立即调用该函数。
例如，此代码将在挂载时立即触发，因为正在调用该函数：
const App = () => {
const fn = () => {
alert("hey");
};
return (
<button onClick={fn()}>click</button>
);
};
但是，如果函数使用闭包，它将只在单击按钮时执行。例如：
const App = () => {
const fn = ()
浏览 3提问于2019-11-12得票数 0
回答已采纳
2回答
所以我使用react- to -pdf来打印Html标签到pdf，按钮在一个组件上，文本在另一个组件上，我似乎没有太多关于如何让按钮打印index.js为PDF的知识。我很确定ref和import出了什么问题
button.js
import React, { Component } from "react";
import Pdf from "react-to-pdf";
const ref = React.createRef();
class Button extends Component {
render() {
return (
浏览 10提问于2020-01-12得票数 0
1回答
我有一个按钮组件，里面有一个按钮，其中有一个状态传递给它，isActive和一个单击函数。当单击按钮时，isActive标志将发生变化，取决于此，应用程序将获取一些数据。按钮的父组件不会重命名。我已经搜索了如何强制停止重新复制组件，并发现React.memo(YourComponent)必须完成这项工作，但在我的情况下仍然不起作用。传递备注函数的检查函数也是有意义的，无论是否重发，我将始终设置为false，但不能将另一个参数传递给该函数。帮助。
button.tsx
interface Props {
isActive: boolean;
onClick: () => v
浏览 8提问于2022-07-06得票数 0
在我的react错误中，像这样(未登录错误:操作必须是普通对象)。使用自定义中间件进行异步操作。)显示了运行此应用程序的所有重要功能都已成功安装，因此不必担心它多次搜索它，但没有发生任何事情，任何人都有解决这个问题的想法，在这种情况下，您的努力将受到赞赏，并提前感谢。
这是我的动作index.js
export function CounterActions(){
return {
type: "Add"
}
}
这是我的减速器counterApp.js
const initialState = {
counter: 0
浏览 5提问于2017-12-06得票数 3
我有以下问题:我有父组件(where按钮，以及要呈现的子组件数组)。
对每个孩子，我传递道具，孩子使用它作为状态，然后改变它。问题是孩子们不会改过自新。
由于这似乎是不可理解的，这里有一些更明确的内容(我希望)：
以下是child.js的简化版本
export default function ChildComponent(props) {
const [open, setOpen] = React.useState(props.open);
const handleClick = () => {
setOpen(true);
}; /* i actually ne
浏览 2提问于2020-02-12得票数 0
回答已采纳
我是React JS的初学者，我正在做一个测试项目来训练我的技能。 我在屏幕上显示了一个农场列表。用户可以单击该按钮来注册新的场，也可以单击该属性来编辑现有属性。 在一个对话模式中，我同时做了这两件事。问题是当我尝试编辑输入字段时，它不工作。我输入什么都无关紧要，什么也没有发生。 这是我的输入域，我使用的是React材料中的TextField： <TextField
id="farmer-name"
label="Farm Name"
value={propertyData.farmerName}
onChange={(event)
浏览 27提问于2020-08-19得票数 1
回答已采纳
我不明白为什么react窗口会在每个(所有) useState events上重新呈现列表，这些值甚至没有连接到列表本身。请有人解释一下，这是如何内部联系，我如何可以避免那些重新渲染？
import React, { useState } from "react";
import { FixedSizeList, areEqual } from "react-window";
function App() {
const [count, setCount] = useState(0);
const handleOnClick = ()
浏览 1提问于2021-10-07得票数 1
回答已采纳
我正在开发一个React中的电影数据库应用程序，并致力于将电影添加到监视列表和收藏列表中的功能。当我点击按钮添加到收藏夹，没有问题，但当我点击按钮添加到监视列表，应用程序崩溃，我得到以下错误。
Uncaught TypeError: Cannot read properties of undefined (reading 'find')
at Movie (Movie.js:21:1)
at renderWithHooks (react-dom.development.js:16305:1)
at mountIndeter
浏览 6提问于2022-10-28得票数 -2
今天我在编写一些演示代码时注意到了这种奇怪的行为，我很好奇发生了什么。"Button“不起作用，尽管"Button 2”是用不同的方式设置的。我知道这与报价有关，但我很好奇为什么会发生这种情况。类似地，如果我在引号中将一个函数传递给按钮3，而将它直接附加到按钮4中，那么按钮4可以工作，但是按钮3不能。
另外，我认为，考虑到按钮2的工作原理，它将立即对console.log("test")进行评估(类似于它在没有引号的情况下的工作方式)，而是会延迟到实际单击按钮。我知道这不是最好的方法，但出于好奇，我很好奇这里到底发生了什么。
document.getElem
浏览 0提问于2019-07-29得票数 1
回答已采纳
1回答
我有一个useEffect的react组件，当道具发生变化时，它不会被触发。我想要这个组件更新它正在显示的基于支柱的内容。但是，当道具发生变化时，什么也不会发生。
为了调试，我添加了一个按钮，该按钮将手动更新该值，该按钮可以正常工作。我只是不能让useEffect为我的生命而奔波。
const ReadOnly = (props: WidgetProps) => {
const [value, setValue] = React.useState('No Value');
const { formContext } = props;
const
浏览 1提问于2020-05-21得票数 6
回答已采纳
我刚开始反应，在将参数传递给处理程序函数时遇到了困难。我的测试代码如下：
import React from 'react';
import { useState, useEffect } from 'react';
import './App.css';
function Container(props) {
return <button onClick={props.clickHandler("A")}>Tap</button>;
}
function App() {
function c
浏览 4提问于2020-04-01得票数 1
回答已采纳
class App extends React.Component {
method(){
console.log(this);
}
render(){
return (<div>
<button onClick={this.method}>Try it</button>
</div>)
}
}
ReactDOM.render(<App/>, document.getElementById('d
浏览 0提问于2016-12-29得票数 0
我有一个呈现App组件的index.js文件。
Index.js文件
ReactDOM.render(<App />, document.getElementById('root'));
下面是我有SettingContainer组件的SettingContainer.js文件的代码。我有一个按钮点击它，我需要重新渲染<SettingContainer value="10" />，但它不渲染与defaultvalues。
SettingContainer.js文件：
import React from 'react';
浏览 0提问于2020-02-23得票数 1
1回答
我正在将一个react迁移到ES6和moving，以便将它们绑定到构造函数中，下面是一个非常基本的示例：
import React from 'react';
import ReactDom from 'react-dom';
export default class Button extends React.Component {
constructor() {
super();
this.click = this.click.bind(this);
}
click() {
alert(
浏览 4提问于2016-05-05得票数 1
回答已采纳
我正在尝试使用react-water-wave包来设置react的涟漪效果。https://github.com/xxhomey19/react-water-wave 我可以在没有参数的情况下调用子方法，它工作得很好。但是当我使用参数调用参数化的drop方法时，什么也没有发生。 import React, { Component } from "react";
import Background from "../img/home.jpg";
import WaterEffect from "react-water-wave";
class
浏览 13提问于2019-05-14得票数 0
回答已采纳
我有一个React函数组件，它监听按钮的单击并相应地更改状态。我可以看到，在视图中，状态确实发生了变化。然而，当试图读取当前状态时-它似乎仍然是初始状态： import React from "react";
export default function App() {
const [state, setState] = React.useState("Not Changed");
const [print, setPrint] = React.useState(null);
const change = () => {
set
浏览 12提问于2020-04-13得票数 0
回答已采纳
“反应”："^16.13.1“”反应-过渡-团体“："^4.3.0”
<React.StrictMode>
<Router>
<App />
</Router>
</React.StrictMode>
大家好。
我面临着findDOMNode的警告，在网上找不到正确的解决方案。
index.js:1警告: findDOMNode在StrictMode中被废弃。findDOMNode被传递给StrictMode内部的一个转换实例.
这个示例是从off docs 复制的，单击
浏览 9提问于2020-03-31得票数 5
回答已采纳
我在试着学点东西。我正在处理的组件是一个简单的基于<div>的按钮，当单击该按钮时，它会将值作为参数传递给调度，因此它可以稍后显示在其他地方。
在了解了web上的文档和教程之后，我得出了以下代码：
主应用程序容器
import React, { Component } from 'react'
import { Provider } from 'react-redux'
import configureStore from './../store/configureStore.js'
import Input from './
浏览 3提问于2017-10-25得票数 3
回答已采纳
4回答
我是ReactJS新手，但我想创建一个简单的域，可以登录和注销。我在AsyncStorage中存储用户凭据。这是我的index.js：
..
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
..
class Index extends Component {
render() {
return (
<Router>
<Switch>
&
浏览 0提问于2018-08-21得票数 0
回答已采纳
我现在正试图建立youtube克隆人。我试图使用从父组件传递到子组件的回调函数来操作状态。但问题是，我无法将回调函数直接分配给我的子JSX组件的click事件。
我将一个回调函数从父组件、APP传递到子组件、VideoList，然后再传递给VideoListItem。问题在VideoListItem中。如果我像这个onClick={onVideoSelect(video)}一样从App直接添加回调函数到JSX，它会导致无限循环，并抛出错误消息“未察觉的错误:最大的更新深度超过了。当组件在componentWillUpdate或componentDidUpdate中反复调用setState时就会
浏览 2提问于2018-06-04得票数 0
回答已采纳
1回答
功能组件数组未按预期追加属性内容
、、、、
我想向<Feeds/>组件添加一个<TokenFeed/>功能组件数组。问题是，当我这样做时，将一些文本传递给我的<App/>的onClick()事件不能按预期工作。当单击数组版本的<TokenFeed/>时，它将替换我的<input/>文本，而不是附加到文本的末尾。 相反，当我在<Feeds/>的return中添加<TokenFeed/>的副本并单击按钮时，它可以正常工作。 我怎么才能解决这个问题呢？ Demo import React, { useState } from "react";
浏览 45提问于2021-11-17得票数 0
回答已采纳
我在子组件中用useImperativeHandle钩子创建了一个方法。然后，我可以完全从父组件访问它。就像下面的例子。但是，我不能从子组件访问它。另一种说法是，焦点来自父按钮工作，而焦点来自子不工作。我该怎么做？
fancyInput.js
import React, { forwardRef } from "react";
const FancyInput = forwardRef((props, ref) => {
const inputRef = React.useRef();
React.useImperativeHandle(ref, ()
浏览 3提问于2020-12-31得票数 2
回答已采纳
1回答
我们正在使用nextjs并尝试用document.getElementById在按钮上更改样式，但是无论我们做什么，样式都不会改变。
页/index.js
function Index() {
function change(){
console.log('changing');
document.getElementById('navi').style.color='blue';
}
return (<Some test={change}> </Some>)
}
现在，在页面
浏览 5提问于2022-04-09得票数 0
据我所知，这并不是让按钮在点击时显示警报的正确方式。
我想不谈这背后的逻辑。我理解单击时需要获得对函数的引用，以便按预期工作。
在下面的示例中，将引用将在单击时调用的箭头函数：
<button onClick={() => alert('hi)}>Click me!</button>
但是，在这种情况下，在幕后发生了什么：
<button onClick={alert('hi)}>Click me!</button>
为什么onClick中的语句要在render上进行计算？
编辑:我正在使用React。
浏览 0提问于2018-01-23得票数 2
回答已采纳
我正在建立一个基本的反应应用程序，在其中点击一个按钮应该打开一个新的页面在同一选项卡。我已经使用了React路由器，但这并不适用于我。
我想重定向到一个州，比如说，localhost/test，这是我的index.js
import Test from './test/Test'
import { Route } from 'react-router-dom';
const myFirstElement = <>
<Button onClick={() => window.location.href='test&#
浏览 4提问于2022-06-22得票数 1
回答已采纳
我正在建立一个有反应的网页。我使用了来自udemy的教程，其中作者使用rest调用的redux承诺。它在课程中起了作用。
在我自己的项目中，我设置了所有相同的东西，当我尝试使用redux承诺中间件创建商店时，在启动该网站时会出现以下错误：
Uncaught TypeError: middleware is not a function
at http://localhost:3000/index.js:34412:16
at Array.map (native)
at http://localhost:3000/index.js:34411:27
at Object.<anonymous
浏览 4提问于2017-04-27得票数 4
回答已采纳
我正在使用Next.js框架&在react-color中使用index.js时会收到警告。
这里是index.js**:**
import SketchPicker from 'react-color';
const index = () => {
return <SketchPicker />
}
export default index;
浏览 6提问于2020-04-06得票数 2
1回答
我正在尝试改变点击按钮时的焦点，但是什么也没有发生。我从react官方文档开始工作..我的代码片段是： 我在构造函数中定义了ref constructor(props) {
super(props)
this.firstInput = React.createRef()
} 然后编写一个函数来设置焦点 changeFocus = () => {
this.firstInput.current.focus()
} 然后定义一个按钮，用于在单击时调用函数 <Button onClick={this.changeFocus}>
浏览 17提问于2020-07-14得票数 0
我在学习反应。
我有这样的组件结构-
index.js
import React from "react";
import Button from "./Button/Button"
export default function Index() {
return (
<>
<Button />
<div>Value of flag in Index.js = {}</div>
</>
);
}
Button.js
import React, { use
浏览 8提问于2021-10-16得票数 0
回答已采纳
我希望在子响应组件中使用回调，以便可以从父组件中的子组件调用函数。但是，当我在父组件中处理回调，并尝试设置这个子函数，以便以后单击按钮时可以调用该函数时，该函数将意外地被调用。
我想要发生的是，在单击'Invoke Sample‘按钮时调用sampleFunction，但是在挂载父组件时调用sampleFunction (因此控制台用’foo‘记录)。如何正确地将此回调函数从子函数传递给父函数？谢谢。
index.js:
import React, { useEffect } from "react";
import ReactDOM from "react-
浏览 4提问于2020-07-19得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
