草庐IT

Reactjs-setState

全部标签

javascript - 如何使 ReactJS 中的表格可排序?

我正在ReactJS中构建一个简单的应用程序,它通过调用某个API使用JSON数组。然后我将数组的结果填充到一个表中。我现在想让表格的列可排序。有人可以帮我吗?这是我的代码。classParentComponentextendsComponent{constructor(props){super(props);this.state={data:[]};}componentDidMount(){fetch("http://hostname:xxxx/yyyy/zzzz").then(function(response){returnresponse.json();}).then(item

javascript - Reactjs map 有效,但 forEach 无效

我很难理解forEach和map之间的区别。在下面的渲染函数中,如果将“forEach”替换为“map”,它就可以工作。我不明白为什么它不适用于“forEach”。{item.id}和{item.text}都存在于这两种方法中。那么,为什么在使用“forEach”时没有设置“TodoItem”的Prop?render(){return({this.props.items.forEach(function(item){return()})});}所以如果'forEach'没有返回任何东西,为什么这也不起作用:render(){return({this.props.items.forEac

javascript - ReactJS 如何从列表中删除项目

我有创建的代码元素。我需要通过单击一个一个地删除元素。对于每个元素,我都有Deletebutton.我知道我需要一些功能来通过id删除项目.如何执行此功能以删除ReactJS中的元素?我的代码:classTodoAppextendsReact.Component{constructor(props){super(props);this.handleChange=this.handleChange.bind(this);this.handleSubmit=this.handleSubmit.bind(this);this.state={items:[],text:''};}render(

javascript - 如何通过另一个 DOM 触发 INPUT FILE 事件 REACTJS

我有一个INPUTBUTTON和INPUTFILE,我想点击BUTTON,它会触发INPUTFILEREACTJS中的事件。React.createElement('input',{type:'file',name:'myfile'})然后是按钮React.createElement('a',{onClick:this.doClick},'SelectFile')那么当我们点击AHREF时,如何定义并触发INPUTFILE的点击事件呢?非常感谢您的帮助。:-) 最佳答案 更新:2021年9月18日注意:在NextJS上,我遇到的是o

javascript - 在 React JS 的 this.setState 回调中使用 this.setState?

是否可以在this.setState的回调中调用this.setState?我正在制作一个RoguelikeDungeon并有一个设置,其中在this.setState的回调中使用了一个辅助函数,它再次调用this.setState。我的游戏此时卡住。所以我在React组件中有一个对象,它有一个生成随机二维数组映射的方法:this.Dungeon.Generate();当游戏开始时,我们在componentDidMount()中调用组件中的如下函数:componentDidMount:function(){this.Dungeon.Generate();this.setState({b

javascript - FP 替代 JavaScript/ReactJS 中的多态性

我目前正在做一个ReactJS项目,我需要创建“可重复使用”的组件,其中一些方法需要被“覆盖”。在OOP中,我会使用多态性。我读过一些书,似乎共识是使用HoC/composition,但我不太清楚如何实现这一点。我想如果我可以使用组合获得一个ES6示例,那么之后将这个想法应用到ReactJS可能会更容易。下面是一个ES6OOP示例(忽略事件处理,它只是为了测试)几乎是我想在ReactJS中实现的。有没有人对如何将ReactJS组件分解为HoC有一些指导,或者甚至只是演示我将如何根据示例在ES6中使用组合?classTransferComponent{constructor(){lett

javascript - 方法参数 : destructuring + keeping original parameter (ReactJS component)

这个问题在这里已经有了答案:ES6destructuringfunctionparameter-namingrootobject(5个答案)关闭3年前。有没有办法实现方法参数解构,又能获取方法参数。在具有无状态组件的React应用程序的上下文中,我希望能够替换constMyComponent=(props)=>{const{prop1,prop2}=props;return()}使用更简洁的语法,如constMyComponent=(props:{prop1,prop2})()有没有类似的语法可用?

javascript - 为什么在使用 ES6 和 ReactJS 时必须使用 bind?

使用ES5开发和ReactJS,一个组件可以声明如下:varMyComponent=React.createClass({alertSomething:function(event){alert(event.target);},render:function(){return(ClickMe!);}});ReactDOM.render();在此示例中,this引用对象本身,这是预期的自然行为。问题我的问题是:如何使用ES6创建组件?classMyComponentextendsReact.Component{constructor(props){super(props);}alertS

javascript - 在 await 之后调用 setState 时状态立即可用

在等待另一个函数并将状态记录到控制台后调用setState-该值立即可用。我知道setState是异步的,在所有其他情况下,它不会在调用后立即可用(但会在setState回调中可用)在没有等待的情况下使用(预期)//initalvaluestateis0constresponse=fetchSomething()this.setState({value:5})console.log(this.state.value)//prints0与等待一起使用//initalvaluestateis0constresponse=awaitfetchSomething()this.setState(

javascript - 为什么在 React 的#setState 中使用函数可以解决异步问题?

来自docs,它说“React可以将多个setState()调用批处理到单个更新中以提高性能”,因此它建议使用函数而不是对象作为setState的参数。这如何解决问题?//Wrongthis.setState({counter:this.state.counter+this.props.increment,});//Correctthis.setState((prevState,props)=>({counter:prevState.counter+props.increment})); 最佳答案 当您将一个对象传递给setStat