我正在嘗試做的是在螢屏更改時清除我的類組件中的物件道具的狀態
這是我渲染欄位的地方：
class InputBody extends Component {
constructor(props) {
super(props);
this.state = {
fields: JSON.parse(this.props.route).message,
};
}
render() {
return (
<Fragment>
{Object.keys(JSON.parse(this.props.route).message).length > 0 ? (
<FieldArraysForm all={JSON.parse(this.props.route).message} native={this.props} />
) : (
<ActivityIndicator size="large" color="#eb6b09" />
)}
</Fragment>
);
}
}
然后我在這里處理我的欄位和輸入型別：
class RenderField extends Component {
render() {
return (
<Fragment>
<Texto>{this.props.label}</Texto>
<TextInput
onChangeText={this.props.input.onChange}
{...this.props.input}
keyboardType={this.props.type}
/>
</Fragment>
);
}
}
最后我得到了值：
class FieldArraysForm extends Component {
render() {
const {handleSubmit} = this.props.native;
// event listener
const getFields = async (values) => {
return sleep(500).then(() => {
// implementar prop.reset() as soon as I leave the screen, but how can I make it ?
console.log(JSON.stringify(values))
})
}
return (
<Form>
{this.props.all.map((item) => (
<Field
key={item._id}
name={`customInput.${item._id}`}
component={RenderField}
label={item.field}
type={item.typeFieldAltText}
/>
))}
<View>
<TouchableOpacity onPress={handleSubmit(getFields)}>
<Text>Save Form</Text>
</TouchableOpacity>
</View>
</Form>
);
}
}
有人知道我如何清理我的狀態class component嗎？
Obs：我正在使用：react-navigation v6。
uj5u.com熱心網友回復：
在 InputBody 組件中創建一個重置函式，并將該函式作為道具傳遞給 FieldArrayForm 組件。
class InputBody extends Component {
constructor(props) {
super(props);
this.state = {
fields: JSON.parse(this.props.route).message,
};
}
reset () {
this.setState({});
}
render() {
return (
<Fragment>
{Object.keys(JSON.parse(this.props.route).message).length > 0 ? (
<FieldArraysForm all={JSON.parse(this.props.route).message} resetForm={reset} native={this.props} />
) : (
<ActivityIndicator size="large" color="#eb6b09" />
)}
</Fragment>
);
}
}
然后在 FieldArraysForm 組件中呼叫該重置道具
const getFields = async (values) => {
return sleep(500).then(() => {
// implementar prop.reset() as soon as I leave the screen, but how can I make it ?
console.log(JSON.stringify(values))
this.props.reset()
})
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/386487.html
標籤：javascript 反应原生