如何解决反应:从类转换为具有状态的功能组件
如何将类组件转换为功能组件?
import React,{ Component } from 'react'
class Test extends Component {
state = {
value: "test text",isInEditMode: false
}
changeEditMode = () => {
this.setState({
isInEditMode: this.state.isInEditMode
});
};
updateComponentValue = () => {
this.setState({
isInEditMode: false,value: this.refs.theThexInput.value
})
}
renderEditView = () => {
return (
<div>
<input type="text" defaultValue={this.state.value} ref="theThexInput" />
<button onClick={this.changeEditMode}>X</button>
<button onClick={this.updateComponentValue}>OK</button>
</div>
);
};
renderDefaultView = () => {
return (
<div onDoubleClick={this.changeEditMode}
{this.state.value}>
</div>
};
render() {
return this.state.isInEditMode ?
this.renderEditView() :
this.renderDefaultView()
}}
export default Test;
我假设有人需要使用钩子和销毁方法,但是不确定如何实现它。 有没有好的指导方针或最佳做法?
解决方法
我对发生的情况做了简短的解释:
const Test = () => {
// Use state to store value of text input.
const [value,setValue] = React.useState("test text" /* initial value */);
// Use state to store whether component is in edit mode or not.
const [editMode,setEditMode] = React.useState(false /* initial value */);
// Create function to handle toggling edit mode.
// useCallback will only generate a new function when setEditMode changes
const toggleEditMode = React.useCallback(() => {
// toggle value using setEditMode (provided by useState)
setEditMode(currentValue => !currentValue);
},[
setEditMode
] /* <- dependency array - determines when function recreated */);
// Create function to handle change of textbox value.
// useCallback will only generate a new function when setValue changes
const updateValue = React.useCallback(
e => {
// set new value using setValue (provided by useState)
setValue(e.target.value);
},[setValue] /* <- dependency array - determines when function recreated */
);
// NOTE: All hooks must run all the time a hook cannot come after an early return condition.
// i.e. In this component all hooks must be before the editMode if condition.
// This is because hooks rely on the order of execution to work and if you are removing
// and adding hooks in subsequent renders (which react can't track fully) then you will
// get warnings / errors.
// Do edit mode render
if (editMode) {
return (
// I changed the component to controlled can be left as uncontrolled if prefered.
<input
type="text"
autoFocus
value={value}
onChange={updateValue}
onBlur={toggleEditMode}
/>
);
}
// Do non-edit mode render.
return <div onDoubleClick={toggleEditMode}>{value}</div>;
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。