如何将状态提升到父组件

Question

我有表示和容器组件。演示组件使用本地状态。我想删除父组件的本地状态。这是必要的，这样表示组件就没有逻辑了。请帮我

Page1.jsx:

import React, { useState } from 'react';
function Page1(props) {
let textareaRef = React.createRef();

const [state, setState] = useState({
presentText: '',
});
function textareaSet() {
props.setAppTextCreator(textareaRef.current.value);
textareaRef.current.value = '';
}
function textareaChange() {
setState({...state, presentText: textareaRef.current.value})
}
return (
<div>
<textarea 
ref={ textareaRef }
onChange={ textareaChange }>
</textarea>
<button onClick={ textareaSet }>send</button>
<div>present: { state.presentText }</div>
<div>memorized: { props.text }</div>
</div>
);
}
export default Page1;

Page1smart.jsx:

import {connect} from "react-redux";
import { setAppTextCreator } from '../../redux/appReducer';
import Page1 from './Page1';
const mapStateToProps = state => {
return {
text: state.appReducer.appText,
presentText: state.presentText
}
}
export default connect(mapStateToProps, { setAppTextCreator })(Page1);

Answer 1

如果我正确理解您的问题，您只是想从Page1中删除本地组件状态，并从redux中传入该状态。

1. 删除文本区域onChange处理程序，您稍后将访问当前值
2. 渲染从道具传递的presentText
3. 使用useRefreact钩子并声明textareaRef常量，因为它在渲染过程中没有重新分配

Page1

import React, { useRef, useState } from 'react';
function Page1({ presentText, setAppTextCreator, text }) {
const textareaRef = useRef();

function textareaSet() {
setAppTextCreator(textareaRef.current.value);
textareaRef.current.value = '';
}
return (
<div>
<textarea ref={textareaRef} />
<button onClick={textareaSet}>send</button>
<div>present: {presentText}</div>
<div>memorized: {text}</div>
</div>
);
}