骑龙


id 13942


骑龙 不在线 10 hours 19 minutes 7 seconds 舵主 研究生 移动端用户 118 仙灵石


注册时间:2019年11月07日 10:02

最后一次登录时间:2020年07月10日 19:09

最后一次在线时间:2020年07月10日 19:26

  • Redux 入门教程 #5 单独使用 Redux

    VSCODE 编辑器:rxreducer 快捷键可以生成reducer 代码

  • react 组件间的通信方法

    特别喜欢这类总结性的文档👍

  • react 基础实践篇-小型财务系统 #8 更新 Record

    通过 React.createRef() 来绑定比较合适,可以避免一些不必要的隐藏错误。
    1、constructor:

      constructor(props){
            super(props);
            this.date = React.createRef();
            this.comment = React.createRef();
            this.amount = React.createRef();
    
            this.state = {
                edit:false,
            }
        }
    

    2、return 部分:

    <tr>
         <td><input type="text" className="form-control" defaultValue={this.props.record.date} ref={this.date} /></td>
         <td><input type="text" className="form-control" defaultValue={this.props.record.comment} ref={this.comment} /></td>
          <td><input type="text" className="form-control" defaultValue={this.props.record.amount} ref={this.amount} /></td>
            <td>
                  <button className="btn btn-info mr-1" onClick={this.handleUpdate}>更新</button>
                  <button className="btn btn-danger" onClick={this.handleToggle}>取消</button>
            </td>
     </tr>
    

    3、handleUpdate 函数:

    handleUpdate = (event)=>{
            event.preventDefault();
            let data = {
                date:this.date.current.value,
                comment:this.comment.current.value,
                amount:Number.parseInt(this.amount.current.value,0)
            }
            console.log(data)
            // TODO:网络请求,更新数据
        }
    
  • react 基础实践篇-小型财务系统 #8 更新 Record

    这样会多一次网络请求,当数据量比较大的时候不可取哦~

© 汕尾市求知科技有限公司 | 粤ICP备19038915号 | 关注我们 | 在线学员:125

Top