如何使用按钮的onClick将AceEditor的值传递到组件状态?ReactJS

Question

我目前正试图在ACE编辑器的帮助下实现某种CodeMirror。我曾尝试在"onClick"按钮参数旁边使用state，但实际上无法实现。

import React, { Component } from 'react';
import { makeStyles, createStyles } from '@material-ui/core/styles';
import './CodeMirror.css';
import { Box, Button } from '@material-ui/core';
// Import Brace and the AceEditor Component
import AceEditor from 'react-ace';
import TryItButton from '../CustomButton/TryItButton';
// Import a Mode (language)
import 'ace-builds/src-noconflict/mode-javascript';
// Import a Theme (okadia, github, xcode etc)
import 'ace-builds/src-noconflict/theme-twilight';
export interface AppProps {
headings: {
key: number;
name: string;
pathname: string;
}[];
subheadings: {
key: number;
name: string;
calls: string[];
}[];
}
interface AppState {
value: string;
}
function onChange(newValue: string) {
console.log('CodeMirror value: ', newValue);
}
export default class CodeMirror extends Component<AppProps, AppState> {
constructor(props: AppProps) {
super(props);
this.state = { value: '' };
}
render(): JSX.Element {
return (
<>
<div className="main-container-codemirror">
<div className="top-block-codemirror">
<Box className="top-bar-text-codemirror">
<i className="white">Example Call</i>
</Box>
</div>
<div className="example-block-codemirror">
<div className="textarea-example">
<AceEditor
// placeholder="Enter a call here..."
mode="javascript"
theme="twilight"
name="ace-editor"
fontSize={12}
showPrintMargin
wrapEnabled
showGutter
highlightActiveLine
value={this.state.value}
setOptions={{
enableBasicAutocompletion: true,
enableLiveAutocompletion: true,
enableSnippets: false,
showLineNumbers: true,
tabSize: 2,
useWorker: false,
}}
style={{
position: 'relative',
width: '100%',
height: '100%',
}}
onChange={onChange}
/>
</div>
<div className="spacer">
<Button
className="try-it-button"
style={{
backgroundColor: '#533cf8',
color: 'white',
borderRadius: 0,
fontSize: 13,
fontWeight: 200,
}}
>
Try it!
</Button>
<div className="spacer-text-div">
auto-update 'fat', alphabetize payload, and make the example
call below
</div>
</div>
<div className="header-2">
<i className="white">Example Response</i>
</div>
<div className="textarea-example">
<textarea
readOnly
className="example-code"
value="Response code"
/>
</div>
<div className="bottom-block-codemirror" />
</div>
</div>
</>
);
}
}

到目前为止，这是我的代码，但我试图做的是，在选择"Try it"后，将输入AceEditor组件的文本存储在组件状态中(见下文。输入的文本也显示在底部文本区域会很好，但在状态中获得这个值足以让我继续这个项目的其余部分。

我目前正在控制台中使用"onChange"显示AceEditor中输入的内容，但在该组件本身的各个部分之间传递该值时遇到了问题。非常感谢。

CodeMirror组件

Answer 1

尝试这种方法，

import "./styles.css";
import React, { Component } from "react";
import { makeStyles, createStyles } from "@material-ui/core/styles";
// import './CodeMirror.css';
import { Box, Button } from "@material-ui/core";
// Import Brace and the AceEditor Component
import AceEditor from "react-ace";
import TryItButton from "../CustomButton/TryItButton";
// Import a Mode (language)
import "ace-builds/src-noconflict/mode-javascript";
// Import a Theme (okadia, github, xcode etc)
import "ace-builds/src-noconflict/theme-twilight";
export default function App() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<CodeMirror />
dsdsd
</div>
);
}
export interface AppProps {
headings?: {
key: number;
name: string;
pathname: string;
}[];
subheadings?: {
key: number;
name: string;
calls: string[];
}[];
}
interface AppState {
value: string;
textAreaValue?: string;
}
class CodeMirror extends Component<AppProps, AppState> {
constructor(props: AppProps) {
super(props);
this.state = { value: "", textAreaValue: "" };
}
onChange(newValue: string) {
console.log("CodeMirror value: ", newValue);
this.setState({ value: newValue });
}
render() {
return (
<>
<div className="main-container-codemirror">
<div className="top-block-codemirror">
<Box className="top-bar-text-codemirror">
<i className="white">Example Call</i>
</Box>
</div>
<div className="example-block-codemirror">
<div className="textarea-example">
<AceEditor
// placeholder="Enter a call here..."
mode="javascript"
theme="twilight"
name="ace-editor"
fontSize={12}
showPrintMargin
wrapEnabled
showGutter
highlightActiveLine
value={this.state.value}
setOptions={{
enableBasicAutocompletion: true,
enableLiveAutocompletion: true,
enableSnippets: false,
showLineNumbers: true,
tabSize: 2,
useWorker: false
}}
style={{
// position: 'relative',
width: "100%",
height: "200px"
}}
onChange={(e) => this.onChange(e)}
/>
</div>
<div className="spacer">
<Button
className="try-it-button"
onClick={() =>
this.setState((prev) => ({
...prev,
textAreaValue: prev["value"]
}))
}
style={{
backgroundColor: "#533cf8",
color: "white",
borderRadius: 0,
fontSize: 13,
fontWeight: 200
}}
>
Try it!
</Button>
<div className="spacer-text-div">
auto-update 'fat', alphabetize payload, and make the example
call below
</div>
</div>
<div className="header-2">
<i className="white">Example Response</i>
</div>
<div className="textarea-example">
<textarea
readOnly
className="example-code"
value={this.state.textAreaValue || "Response code"}
/>
</div>
<div className="bottom-block-codemirror" />
</div>
</div>
</>
);
}
}

代码沙盒-https://codesandbox.io/s/reverent-microservice-yp2ff?file=/src/App.tsx:0-3764