javascript - 表单在提交时重置存储的组件

问题描述

我想制作一段可编辑的显示文本，例如：

文本本身不是文本区域/输入，它只是标准文本
单击文本将打开一个文本区域和编辑按钮，允许您编辑文本
单击编辑按钮将更新显示文本，并隐藏文本区域/编辑按钮（显示：无）

我已经实现了这一切，现在有一个错误，每当我点击“编辑”按钮时，所有的文本组件都会从页面上完全删除。

为此，我有一个Page组件，它存储了一系列组件（您可以通过页面底部的按钮EditableText添加更多EditableText组件）：+

const Page = (props) => {
  const classes = useStyles()
  var [components, setComponents] = useState([])
  var [displayButton, setDisplayButton] = useState(false)

  const toggleButton = () => {
    displayButton = !displayButton
    setDisplayButton(displayButton)
  }

  const addCaution = () => {
    setComponents(components.concat(<Caution />))
    displayButton = !displayButton
    setDisplayButton(displayButton)
  }

  const addImportant = () => {
    setComponents(components.concat(<Important />))
    displayButton = !displayButton
    setDisplayButton(displayButton)
  }

  const opbutton = (
    <div>
      <Button onClick={addHeader}>header</Button>
      <Button onClick={addText}>text</Button>
      <Button onClick={addCaution}>caution</Button>
      <Button onClick={addImportant}>important</Button>
    </div>
  )

  return (
    <div className={classes.page}>
      {components}
      {displayButton ? opbutton : null}
      <Button onClick={toggleButton}>+</Button>
    </div>
  )

通过将EditableText组件添加到数组中useState。

这是代码EditableText：

const EditableText = (props) => {
  const classes = useStyles()
  const { inputs, handleInputChange, handleSubmit } = useSubmit()
  var [displayText, setDisplayText] = useState("click here to add notes!")
  var [showBox, setShowBox] = useState(false)
  var [showClickArea, setClickArea] = useState(true)
  const inputBox = (
    <form
      onSubmit={handleSubmit}
      style={{ display: "flex", flexDirection: "row", width: "100%" }}
    >
      <textarea
        type="text"
        name="displayText"
        className={classes.textbox}
        onChange={handleInputChange}
        value={inputs}
        style={{ borderColor: props.border }}
        onSubmit={"return inputs"}
      >
        {inputs}
      </textarea>
      <Button id="editbutton" type="submit" className={classes.button}>
        edit
      </Button>
    </form>
  )

  const toggleEdit = () => {
    showClickArea = !showClickArea
    setClickArea(showClickArea)
    showBox = !showBox
    setShowBox(showBox)
  }

  const clickArea = (
    <div
      style={{ width: "80%", height: "200%", position: "absolute" }}
      onClick={toggleEdit}
    />
  )

  return (
    <div>
      {showClickArea ? clickArea : null}
      <div className={classes.background} style={{ color: props.color }}>
        {inputs}
        <div>{showBox ? inputBox : displayText}</div>
      </div>
    </div>
  )
}

您可能会注意到使用useSubmit自定义钩子：

  const useSubmit = (callback) => {
    const [input, setInput] = useState({})

    const handleSubmit = (event) => {
      callback()
    }

    const handleInputChange = (event) => {
      event.persist()
      setInput((input) => ({
        ...input,
        [event.target.name]: [event.target.value],
      }))
    }

    return (handleSubmit, handleInputChange, input)
  }

我认为这可能是自定义钩子或使用formand的问题submit。我认为form应该在提交后清除页面。但我不完全确定。知道如何防止这种情况吗？

标签： javascripthtmlcssreactjs

function setDisplayState() { if (edit === false) { return ( <div style={{ color: props.color, fontWeight: props.weight ? props.weight : 400, fontSize: props.size ? props.size : 14, }} > {displayText} </div> ) } else { return ( <div> <textarea className={classes.textbox} style={{ color: props.color }} value={displayText} onChange={(e) => { displayText = e.target.value setDisplayText(displayText) }} /> <Button className={classes.button} onClick={saveChange}> save </Button> </div> ) } }

javascript - 表单在提交时重置存储的组件

问题描述

解决方案

推荐阅读