如何在React应用程序中允许用户格式化

Question

我有一个React应用程序，用户可以在文本框中键入内容，单击"提交"，然后文本就会出现在某个地方。

我想添加允许用户格式化文本的功能。就像你在SE上提问时可以做的那样。例如，我希望以下输入显示为bold。

<b>bold</b>

我怎样才能做到这一点？或者在哪里可以找到这种东西？

Answer 1

如果你想启用与堆栈溢出相同的功能，那么我认为实现这一点的一种方法是允许用户输入markdown并将其转换为HTML。这是一个可以帮助的库：标记

Freecodecamp有一个降价预览器作为他们的项目之一，所以如果你想看看一些例子，你可能会发现数百种不同的实现：https://www.freecodecamp.org/forum/t/build-a-markdown-previewer/198715

Answer 2

是的，这可以使用state以及复选框切换来确定文本是否应该是粗体。

handleChange将更新输入。handleFormatChange将更新是否应使用粗体文本。在render中，可以实现条件来确定何时呈现什么格式。

class Formatter extends React.Component {
state = {
format: false,
input: ""
}
handleChange = () => {
this.setState({
input: event.target.value
})
}
handleFormatChange = () => {
this.setState({
format: !this.state.format
})
}
render() {
var input = this.state.format 
? <b> {this.state.input} </b> 
: <p> {this.state.input} </p>
return ( 
<div>
Bold <input type="checkbox"
onChange = {
this.handleFormatChange
}
/>
<br />
<input value={this.state.input}
onChange = {this.handleChange}
/> 
<br/>
{input} 
</div>
);
}
}
ReactDOM.render( <
Formatter / > ,
document.getElementById('root')
);

p {
margin-top: 0px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root">
<!-- This element's contents will be replaced with your component. -->
</div>