react入门学习及总结 (2)

appform组件用来对用户输入进行添加到待办事项中

<form className='ui reply form' onSubmit={this.handleSubmit.bind(this)}> <div className='field' style={styles.title}> <input type='text' placeholder='TODO' ref='text' /> </div> <button type='submit' className='ui blue button'> 添加 </button> </form>

当用户点击添加时候会触发onSubmit事件，通过this.refs.text.value获取到用户输入的值后调用父组件AddTodoItem函数并将新数据加入到列表中

handleSubmit (event) { event.preventDefault() let text = this.refs.text.value if (!text.trim()) { alert("Input can't be null") return } let id = uuid(); this.props.AddTodoItem({id,text,complete:false}); }

app.js文件中监听OnAddTodoItem事件

// 合并data，并更新state OnAddTodoItem (newItem) { let newdata = this.state.data.concat(newItem); this.setState({data : newdata}); }

这样我们添加的数据就会直接显示在列表中了

其他的功能，还有诸如数据过滤，全部、完成、未完成
状态修改及删除

由于时间关系，而且代码本身也比较简单，直接看代码也能看的懂，剩余部分功能代码我上传到github上面，可以直接fork下来阅读，或者跟着代码写一遍

todolist-react项目地址

react父子组件通信

在项目中我们的app.js和appform.js。app.js作为父组件，这里涉及到父子组件通信

1、app.js添加OnAddTodoItem函数
用于合并data，并更新state

OnAddTodoItem (newItem) { let newdata = this.state.data.concat(newItem); this.setState({data : newdata}); }

2、在AppForm组件标签添加AddTodoItem函数bind指向OnAddTodoItem

<AppForm AddTodoItem={this.OnAddTodoItem.bind(this)} />

3、form.js子组件中通过props触发AddTodoItem函数

this.props.AddTodoItem({id,text,complete:false}); jxs语法样式对象声明

styles样式对象声明是jxs语法中声明样式的一种方式，也可以通过className来添加样式

var styles = { 'title': { width: 200, display: 'inline-block', marginRight: 10, verticalAlign: 'top' } } <div className='field' style={styles.title}> <input type='text' placeholder='TODO' ref='text' /> </div> refs获取表单值

使用this.refs.all.value可以直接拿到表单中的value值， 前提需要在表单中设定ref的值ref='all'

handleAll () { let all = this.refs.all.value; this.props.SubmitChooseValue(all); } <button type='submit' style={styles.top} className='ui blue button' value='1' ref='all' onClick={this.handleAll.bind(this)} > 数组遍历显示列表

我们可以直接在return中编写遍历语句，使用{}大括号包住

render() { // 通过不同的choosevalue值 过滤list内容 var value = this.props.choosevalue; // alert(value) return ( <div> {this.props.data.map(({ id, text, complete }, index) => ( <AppTodos key={index} id={id} text={text} complete={complete}/> ))} </div> ) }

除了以上这种方式，也可以这样

在return之外进行遍历，然后返回一个参数，将返回参数添加到return中即可

render() { // 通过不同的choosevalue值 过滤list内容 var value = this.props.choosevalue; // alert(value) var list = this.props.data.map(({ id, text, complete }, index) => { return <AppTodos key={index} id={id} text={text} complete={complete}/> }) return ( <div>{list}</div> ) }

其实jsx本身其实也是一种表达式，在编译之后，JSX 其实会被转化为普通的 JavaScript 对象。
意味着，我们可以在 if 或者 for 语句里使用 JSX，将它赋值给变量，当作参数传入，作为返回值都可以

function getGreeting(user) { if (user) { return <h1>Hello, {formatName(user)}!</h1>; } return <h1>Hello, Stranger.</h1>; } 最后

以上就是简单了解对react的使用，然后做了一个todolist小demo，涉及到了父子组件通信，因为只有2层，所以使用props完全就可以，没有任何问题，但是假如项目更加复杂，涉及组件比较多，父子组件通信，子组件与子组件通信，我们就需要引入redux来做数据的状态管理了 ，类似vue中的vuex一样。之后，进一步学习react，对react的生命周期和router路由以及redux状态管理做一个了解和学习使用