Блог

У меня есть форма.

Это возвращает обратно и загружает его правильное значение,

однако, когда я начинаю печатать, оно возвращает только свое значение плюс одну букву из onChange .

вот что я имею в виду

Как мне очистить значение формы при выполнении onChange? Я попытался очистить форму с помощью config.setStateVar(«), который, похоже, все еще не работает. У кого-нибудь есть какие-либо идеи?

  const onChange = (e, config) => {

    config.setStateVar('')


    const value = e.target.innertext ? e.target.innertext
    : e.target.value

    config.setStateVar(value)

  }
 

Полный код:

 const editCriticalObjects = props => {

  const query = new URLSearchParams(props.location.search)
  const criticalObjectsId = query.get('id')

  const loading = useContext(LoadingContext)
  const user = useContext(UserContext)

  const [editCriticalObjects, setEditCriticalObjects] = useState([])

  const [criticalObjectTitle, setCriticalObjectTitle] = useState('')
  const [criticalObjectDomainName, setCriticalObjectDomainName] = useState('')
  const [criticalObjectType, setCriticalObjectType] = useState('')

const [findVal, setFindVal] = useState('')

  useEffect(() => {
    async function onLoadCriticalObjects() {
      loading.setLoading(true)
      const results = await get(`get_critical_objects?id=${criticalObjectsId}`, user.user)
      setEditCriticalObjects(results)
      loading.setLoading(false)
    }
      onLoadCriticalObjects()
  }, [])

  const assetIdObject =  editCriticalObjects.filter(obj => {
    if (obj.asset_id === criticalObjectsId) {
      return obj
    }
      return assetIdObject
  })


  const configs = [
    {
      label: 'Title',
      name: 'Title',
      value:   assetIdObject.map(item => item.asset_id),
      field: SinglelineTextfield,
      uniqueIdentifier: 0,
      stateVar: criticalObjectTitle,
      setStateVar: setCriticalObjectTitle,
    },
    {
      name: 'type',
      uniqueIdentifier: 1,
      label: 'type',
      value: assetIdObject.map(item => item.type),
      field: SinglelineTextfield,
      stateVar: criticalObjectType,
      setStateVar: setCriticalObjectType,
    },
    {
      name: 'Domain',
      label: 'Domain',
      value:  assetIdObject.map(item => item.Domains),
      field: SinglelineTextfield,
      uniqueIdentifier: 2,
      stateVar: criticalObjectDomainName,
      setStateVar: setCriticalObjectDomainName,
    }
  ]

  const criticalObjectParams = {
    asset_ids: criticalObjectTitle,
    asset: true,
    merge: true,
  }

  console.log(criticalObjectParams)

  const onChange = (e, config) => {
    const value = e.target.innertext ? e.target.innertext
    : e.target.value

    config.setStateVar(value)

  }


  const onSubmitClick = async () => {
    loading.setLoading(true)

    await verifiedPost('post_critical_objects', criticalObjectParams, user.user)
    loading.setLoading(false)
  }

  return (!editCriticalObjects ? null :
    <PageWrapper title={`Edit Critical Object: ${criticalObjectsId}`}>
      <div className='Main Card EditCriticalObjectFormWrapper'>
        {configs.map((config, k)=> {
          const Field = config.field
            return (
              <React.Fragment key={k}>
                <Field
                  style={{ marginBottom: '15px'}}
                  name={config.name}
                  placeholder={config.name}
                  value={config.value}
                  initialValue={config.value}
                  initialValues={config.value}
                  uniqueIdentifier={k}
                  label={config.label}
                  onChange={(e) => onChange(e, config)}
                />
              </React.Fragment>
            )
        })}
          <Button
            className='Button Dark Main'
            text='Submit'
            onClick={onSubmitClick}
          />
      </div>
    </PageWrapper>
    )
}

export default editCriticalObjects