2019年12月

在react的一个评论组件中,大致如下的写法:

render() {
    return (
        <form>
            <div>
                <label htmlFor="username">用户名: </label>
                <input
                  type="text"
                  name="username"
                  value={ this.state.username }
                  onChange={ this.handleOnChange.bind(this, 'username') }
                  required
                ></input>
            </div>
            <div>
                <label htmlFor="commentContent">评论内容: </label>
                <textarea
                  ref={ textarea => this.textArea = textarea }
                  value={this.state.commentContent}
                  onChange={ this.handleOnChange.bind(this, 'commentContent') }
                  name="commentContent"
                  cols="30"
                  rows="10"
                ></textarea>
            </div>
            <button onClick={ this.submitComment.bind(this) }>发布</button>
        </form>
    );
  }

其中的form表单里面使用了原生button元素,神奇的是,每次发表评论后,页面会重新加载,这就很可怕了。在大佬的帮助下,debug的过程略过,结论就是:

在form表单中的button如果没有显示写明type属性为什么,则默认是为type="submit"

- 阅读剩余部分 -

昨天在学习reactjs小书的时候遇到一个string相关的问题,也就是这样的一个需求:

用户会在textarea中输入文本,当提交文本,在下方显示的时候,要对具有\`\`这样的字符围起来的字符串进行<code></code>的转化(也就是markdown中的行内代码语法)

直接字符替换

起初没多想,不就是字符替换吗?而且这就是个递归问题嘛,遇到第一个\`符号用<code>替换遇到第二个\`符号用</code>替换,然后递归下去,直到找不到\`符号,于是在经过一番调试,抓脑之后,写成了现在的版本:

- 阅读剩余部分 -