Question

我正在尝试在ReactJS中建立一个聊天室（作为练习）。我刚刚开始玩它，但是我不确定我的方法是否正确。我设法在主聊天div上的输入中添加了文本，但是我不确定如何在主聊天div中的每条消息后添加br。目前，它只是连接文本。

    class Chat extends React.Component {

        constructor(props) {

            super(props);

            this.state = {
                text: props.text,
                message: ''
            }

            this.handleChange = this.handleChange.bind(this);
            this.sendMessage = this.sendMessage.bind(this);

        }

        handleChange(event) {
            this.setState({message: event.target.value});
        }

        sendMessage(event) {

            event.target.value = ''

            this.setState((state, props) => ({
                text: this.state.text + this.state.message, // I tried here to add a br but with no success
                message: ''
            }));

            event.preventDefault();

        }

        render() {
            return (
                <div>
                    <div>
                        {this.state.text}
                    </div>

                    <form onSubmit={this.sendMessage}>
                        <input type="text" value={this.state.message} onChange={this.handleChange} />
                        <input type="submit" value="Submit" />
                    </form>

                </div>
                );
        }
    }

    ReactDOM.render(
        <Chat text='' />,
        document.getElementById('root')
    );

Answer 1

我会尝试使用一个元素数组（可能是div的元素），每个消息一个，而不是用单个字符串表示所有消息。 div的默认显示将使您在每条消息之间都有一个分隔符。然后，您可以自行设置样式，以添加更多间距或任何所需的样式。

查看此处：

class Chat extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            messages: [],
            message: ''
        }

        this.handleChange = this.handleChange.bind(this);
        this.sendMessage = this.sendMessage.bind(this);
    }

    handleChange(event) {
        this.setState({message: event.target.value});
    }

    sendMessage(event) {
        let messages = this.state.messages;
        messages.push(
            <div key={this.state.messages.count + 1}>
                {this.state.message}
            </div>
        );

        this.setState({
            messages: messages, 
            message: '',
        });

        event.preventDefault();
    }

    render() {
        return (
            <div>
                <div>
                    {this.state.messages}
                </div>

                <form onSubmit={this.sendMessage}>
                    <input type="text" value={this.state.message} onChange={this.handleChange} />
                    <input type="submit" value="Submit" />
                </form>
            </div>
        );
    }
}

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

Answer 2

您可以在两个变量之间添加'\n'，也可以使用模板文字。

使用模板文字，在源代码中插入的任何换行符，制表符，空格等都将成为字符串的一部分。

但是您应该使用pre元素来包装字符串，因为它会保留换行符，否则反应只会呈现字符串。

sendMessage(event) {
   event.target.value = ''
   this.setState((state, props) => ({
      text: this.state.text + '\n' + this.state.message ,
      // using template literals
      // text: `${this.state.text}
// ${this.state.message}` ,
      message: ''
   }));
   event.preventDefault();
}

在渲染方法中

<div>
   <pre>{this.state.text}</pre>
</div>

ReactJS：初学者任务-添加换行符

2 个答案: