玩一玩ScriptOJ(二)

继续摸ScriptOJ

#5

有一只狗,不允许别人摸它,一旦摸它就会叫,然后就跑了。

完成 Dog 组件,当用户点击的时候会执行自身的 barkrun 方法。

已经给了代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
class Dog extends Component {
bark () {
console.log('bark')
}

run () {
console.log('run')
}

render () {
return (<div>DOG</div>)
}
}

看起来跟事件有关?估计有一个click什么的事件吧。看来得翻一下文档。

唔。。看了一下,似乎可以这么操作:

1
2
3
4
5
6
7
8
9
10
11
12
13
class Dog extends Component {
bark () {
console.log('bark')
}

run () {
console.log('run')
}

render () {
return (<div onClick={() => {this.bark(); this.run();}}>DOG</div>)
}
}

大概就是把一个闭包绑定到了onClick这个属性上面,至于onClick是不能是html标签本身的onclick属性我就不是很明白,但是这个代码AC了,所以先过。。。

#6

有一只狗,不允许别人摸它,一旦摸它就会叫,然后就跑了;这只狗跑一段时间(20~50ms)以后就会停下来,也不叫了。

完成 Dog 组件,当用户点击的时候会执行自身的 barkrun 方法。给这个 Dog 组件加上状态 isRunningisBarking,在进行相应的动作的时候设置为 true,停下来的时候设置为 false

已经给了的部分代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
class Dog extends Component {
constructor () {
super()
/* TODO */
}

bark () {
/* TODO */
}

run () {
/* TODO */
}

render () {
return (<div>DOG</div>)
}
}

直接怼:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
class Dog extends Component {
constructor () {
super();
this.state = {
isRunning : false,
isBarking : false
};
}

bark () {
this.setState({isBarking: true});
}

run () {
this.setState({isRunning: true});
setTimeout(() => {
this.setState({isBarking: false});
this.setState({isRunning: false});
}, Math.random(20,50))
}

render () {
return (<div onClick={() => {this.bark(); this.run()}}>DOG</div>)
}
}

组件的state可以理解成组件的私有属性,这个私有属性应该是属于某一个组件实例的,至于setState()应该是一个定义在Component类上的方法,我一开始想直接this.state.isRunning = true但是他不让我过。说起来这样写可能确实不符合规范吧。然后还有些问题就是我直接在run()里面setTimeout()总感觉有些不太雅观,ac是ac了,但是有些难受,所以我打算看一下别人是怎么做的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
class Dog extends Component {
constructor () {
super()
this.state = {
isRunning: false,
isBarking: false
}
}

bark () {
console.log('bark')
this.setState({ isBarking: true })
setTimeout(() => this.setState({ isBarking: false }), 20)
}

run () {
console.log('run')
this.setState({ isRunning:true })
setTimeout(() => this.setState({ isRunning: false }), 20)
}

handleClickOnDog () {
this.bark()
this.run()
}

render() {
return (
<div onClick={this.handleClickOnDog.bind(this)}>DOG</div>
)
}
}

写了一个新的方法叫handleClickOnDog,为啥呀,而且他停止跑和吠的时间居然不是固定的,看来这不是一个测试点?而且在onClick里面写的是this.handleClickOnDog.bind(this)看起来像是给这个组件绑定上了一个像事件监听器的东西,这个好像没了解过,不行,得看看。

官方的文档在讲到事件处理的时候给了这样的一份代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true};

// 为了在回调中使用 `this`,这个绑定是必不可少的
this.handleClick = this.handleClick.bind(this);
}

handleClick() {
this.setState(state => ({
isToggleOn: !state.isToggleOn
}));
}

render() {
return (
<button onClick={this.handleClick}>
{this.state.isToggleOn ? 'ON' : 'OFF'}
</button>
);
}
}

ReactDOM.render(
<Toggle />,
document.getElementById('root')
);

其中的注释:// 为了在回调中使用 this,这个绑定是必不可少的

但是如果使用箭头函数的话则不需要绑定this,这个好像跟箭头函数与普通的function中this指向的对象有关。

不行这个我要另外写一篇(x


琢磨了半天this是个啥。。所以今天先摸了(x

今天大概了解了React的事件以及他的state吧。。

虽然也并不是特别的清楚。