我有一个文本框，其中包含来自 api 调用的数据。然后用户可以编辑这个文本框。
我想获取编辑后的文本以通过 api 调用将其发回。该值始终发送为空。任何人都可以帮助我吗？
子组件
export default function RulesText({ruleText, readOnlyStatus, onChange}:{ruleText:string, readOnlyStatus:boolean, onChange:(val:string) => void}) {
const[textValue, setTextValue] = useState(ruleText)
return (
<div>
<textarea
readOnly={readOnlyStatus}
value={textValue}
onChange={(e) => {setTextValue(e.target.value)}}
/>
</div>
)
}
父组件
const[editedRuleText, setEditedRuleText] = useState('')
<RulesText ruleText={rules[1].substring(rules[1].indexOf(":") + 1)} readOnlyStatus={isEditing ? false : true} onChange={(val:string) => {setEditedRuleText(val); console.log('Val Now' + val)}}/>
你已经有onChange来自父组件的 prop，但你还没有调用onChangeprop inRulesText
变化可能是
export default function RulesText({ruleText, readOnlyStatus, onChange}:{ruleText:string, readOnlyStatus:boolean, onChange:(val:string) => void}) {
const[textValue, setTextValue] = useState(ruleText)
return (
<div>
<textarea
readOnly={readOnlyStatus}
value={textValue}
onChange={(e) => {
setTextValue(e.target.value)
onChange(e.target.value) //pass value to the parent component
}}
/>
</div>
)
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句