所以我有这个:
let total = newDealersDeckTotal.reduce(function(a, b) {
return a + b;
},
0);
console.log(total, 'tittal'); //outputs correct total
setTimeout(() => {
this.setState({dealersOverallTotal: total});
}, 10);
console.log(this.state.dealersOverallTotal, 'dealersOverallTotal1'); //outputs incorrect total
newDealersDeckTotal只是一个数字数组,[1, 5, 9]但是this.state.dealersOverallTotal不能给出正确的总数但是total呢？我甚至提出了超时延迟,看看是否解决了这个问题.任何明显的或我应该发布更多的代码？
我在JavaScript中看到了许多倒计时器,并希望让一个人在React中工作.
我借用了我在网上找到的这个功能:
secondsToTime(secs){
let hours = Math.floor(secs / (60 * 60));
let divisor_for_minutes = secs % (60 * 60);
let minutes = Math.floor(divisor_for_minutes / 60);
let divisor_for_seconds = divisor_for_minutes % 60;
let seconds = Math.ceil(divisor_for_seconds);
let obj = {
"h": hours,
"m": minutes,
"s": seconds
};
return obj;
};
然后我自己编写了这段代码
initiateTimer = () => {
let timeLeftVar = this.secondsToTime(60);
this.setState({ timeLeft: timeLeftVar })
};
startTimer = () => {
let interval = setInterval(this.timer, 1000);
this.setState({ interval: interval });
};
timer …我有一个提交按钮的表单.该表单调用onclick函数,将某些事件的状态设置为false为true.然后我想将此状态传递回父级,以便如果它为true则呈现componentA但如果为false则呈现componentB.
我怎么做才能做出反应？我知道我需要使用状态或道具,但不知道该怎么做.这也是单向流反应原理的矛盾吗？
ComponentA代码:
<form onSubmit={this.handleClick}>
handleClick(event) {
this.setState({ decisionPage: true });
event.preventDefault();
};
父组件控制它显示的内容:
return (
<div>
{this.props.decisionPage ?
<div>
<LoginPage />
</div>
:
<div>
<Decision showThanks={this.props.showThanks}/>
</div>
}
</div>
)
此刻出现此错误:
Uncaught TypeError: Cannot read property 'value' of null
我在下面的渲染函数中调用它:
<input type="submit" className="nameInput" id="name" value="cp-dev1" onClick={this.writeData}/>
我也试过在这里调用它
componentWillMount: function(){
var name = document.getElementById('name').value;
},
如何获取输入文本字段的id并读取该值并确保它不为空？
我认为DOM在我尝试读取元素后加载,因此它为空
我有一个回购电话react.我将它克隆到一个本地叫做的另一个回购中different-repo.
然后different-repo,我怎样才能远程推送到不同的仓库,因为目前它正在推动react.
实际上,我希望从react不同的命名回购中克隆很多次,但是当我从那些回购推动他们推送到他们自己的回购.
显然，在普通的JS中我可以做到这一点
var Card = function(rank, suit){
this.rank = rank;
this.suit = suit
}
var cardOne = new Card('3', 'H');
cardOne // Card {rank: "3", suit: "H"}
那么我将如何在React和ES6中做到这一点？
我已经尝试过这样的事情：
class ReactApp extends React.Component{
Card = (rank, suit) => {
this.rank = rank;
this.suit = suit;
};
createCard = () => {
let CardObj = {};
let card = new this.Card('3', 'Hearts');
console.log(card);
};
}
（暂时不显示渲染方法）
但是我怎样才能得到正确的反应呢？React内部如何处理函数？（键值对？）以及如何定义对象等？
当我运行此代码时，任何原因，
input[type=submit]:active {
background-color: green;
}
当我单击所需的按钮时，它只会闪烁绿色一秒钟，然后恢复到原始颜色？我怎样才能让它永远保持绿色？
index.spec.js文件:
import React from 'react';
import { mount } from 'enzyme';
import Header from './';
import { expect } from 'chai';
describe('header component', () => {
let renderedOutput;
beforeEach(() => {
renderedOutput = mount(<Header />)
})
describe('initial state', () => {
it('renders the header', () => {
expect(renderedOutput).to.exist();
});
it('renders the header', () => {
expect(renderedOutput).to.be.present();
});
})
});
运行规范,它失败了:
Error: It looks like you called mount() without a global document being loaded.
我读过一些关于jsdom的内容,但不知道为什么要添加它.有谁解释我做错了什么？
我在创建标头组件时遇到问题，但是在我将标头组件拉入的每个页面的标头上方仍然有空格
这是我的整个标头组件：
import React from 'react';
import { Link } from 'react-router';
import './index.scss';
export default class Header extends React.Component {
render() {
return(
<div className="container">
<ul>
<div className="links">
<li><Link to="quizzes">Quizzes</Link></li>
</div>
<div className="links">
<li><Link to="categories">Categories</Link></li>
</div>
<div className="links">
<li><Link to="create">Create</Link></li>
</div>
</ul>
</div>
)
}
}
这是我的整个CSS
body {
margin: 0;
}
.container {
margin: 0;
background-color: #bec0c4;
height: 50px;
width: 100%;
}
.container ul{
display: flex;
flex-direction: row;
font-size: 20px;
justify-content: space-between;
list-style-type: none;
width: 90%;
}
我已经看到很多答案说要设置空白为0，但这仍然使我在顶部留有空白。如果我将margin-top设置为-20px，它将删除它，但是我不喜欢此解决方案
到目前为止我有这个代码：
var isMatch = viewedUserLikedUsersArray.indexOf(logged_in_user);
if (isMatch >=0){
console.log('is match');
}
else {
console.log('no match');
}
如果一个元素在数组中，它将返回一个大于或等于 0 的数字，所以我可以说isMatch >=0但这似乎不是最安全的方法。我还能如何从所需的代码中返回真/假？
我知道如何使用这样的三元运算符：
{ this.state.showThanks ? 'Thanks for your response!' : null }
但我想呈现html，然后在单击时删除该html
{ this.state.showThanks ? <input type="submit" className="decisionButtons" id="canDecisionButton" value="I can play" onClick={() => this.canPlay()}/>
<input type="submit" className="decisionButtons" id="cantDecisionButton" value="I cannot play" onClick={() => this.cannotPlay()}/>
: 'Thanks for your response!' }
我尝试了上述类似的操作，但出现错误，因此如何在我的react render方法中将html放在三元组中？
说我有这段代码：
<button id="gnrl" onClick={() => this.selectChannel()}>General</button>
如何传递文本General作为参数？即grep 2个按钮标签之间的所有文本？
我有一个功能可以做到这一点：
selectChannel = (channelValue) => {
var x = document.getElementById("general").value;
this.setState({ channelValue: x })
}
但我不想获取值，因为它必须是硬编码的属性。我希望能够更改General为其他任何Random值，例如，这将是传递的值。有任何想法吗？