时间戳

首页 > 解决方案 > 替换内容中的字符串

reactjs - 替换内容中的字符串

问题描述

看看我的Chat.js内容：

import React, { Component } from "react";

class Chat extends Component {
  constructor(props) {
    super(props);
    this.state = {
      messages: [],
      message: ""
    };
  }
  submitMessage(event) {
    event.preventDefault();
    this.setState(state => ({
      messages: [<li>{this.state.message}</li>, ...state.messages]
    }));
    this.setState({
      message: ""
    });
  }
  render() {
    return (
      <>
        <div class="container py-3">
          <h2 className="text-center mb-4">Simple Chat</h2>
          <form
            onSubmit={e => {
              this.submitMessage(e);
            }}
          >
            <input
              type="text"
              className="form-control"
              placeholder={"Enter your message..."}
              value={this.state.message}
              onChange={e => this.setState({ message: e.target.value })}
            />
            <button type="submit" className="btn btn-success mt-2">
              Send Message
            </button>
          </form>

          <div className="container border mt-2">
            <ul className="group-list mt-3 pt-2">{this.state.messages}</ul>
          </div>
        </div>
      </>
    );
  }
}

export default Parent;

另外，这是我的例子： https ://codesandbox.io/s/objective-water-1e8uq

当有人用@输入用户名时，我需要替换用户链接

例如，这是我的消息内容：

Are you good @Daniel ?

我需要将上述消息转换为以下内容：

Are you good <a href="#">@Daniel</a> ?

我使用react-router-dom，所以我需要用这个代码替换链接：

例如：

<Router>
   <Link to={ '#'} onClick={() => {this.example()}}>
    @Daniel
  </Link>
</Router>;

标签： reactjseventsreplacechat

解决方案

我已经更新了您的 submitMessage 函数，代码如下：

submitMessage(event) {
        event.preventDefault();
        const { message } = this.state;
        let msg = message.replace(/@([a-zA-Z0-9]+)/g, value => `<a href="#"> ${value} </a>`);
        this.setState(state => ({
          messages: [<li dangerouslySetInnerHTML={{__html: msg}} />, ...state.messages]
        }));
        this.setState({
          message: ""
        });
      }

这是工作代码：https ://codesandbox.io/s/stupefied-platform-zmg94

推荐阅读