輸入欄位不允許編輯

大家好，我正在嘗試編輯下面的輸入欄位并且不能。我從服務器獲取一些資料，并將這些資料放在value輸入端。這個想法是我們單擊圖示以允許該欄位可編輯但仍不能編輯。

這是input定制的道具：

 <input
          {...field}
          //   required={props.required}
          disabled={props.disabled}
          value={props.value}
          type={props.type}
          autoComplete={props.autoComplete}
          pattern={props.pattern}
          className={`mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm  rounded-md ${
            error ? 'border-red-500' : 'border-gray-500'
          }
          ${
            props.disabled
              ? 'disabled:shadow-none disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200'
              : 'border-gray-500'
          } `}
        />

這是我實際使用它的地方。因此，一旦我單擊該圖示，它的值就會實作，但無法在從服務器回傳的已有值中進行編輯。

const [agent, setAgent] = useState<EstateAgentResponse | null>(null)
  const [enableField, setEnableField] = useState<boolean>(false)

  useEffect(() => {
    const fetchData = async () => {
      try {
        const { id } = params

        const agentUsers = await getEstaAgentUsers(parseInt(id!, 10))
        const agent = await getEstateAgentById(parseInt(id!, 10))

        setAgentUsers(agentUsers)
        setAgent(agent)
      } catch (error) {
        // ToDo:
        // We should handle the error message
        toast.error(`${error}`)
      }
    }
    fetchData()
  }, [])

 const handleInputField = () => {
    setEnableField(!enableField)
  }

<PencilAltIcon className="block h-4 w-4" aria-hidden="true" onClick={handleInputField} />
                              <InputField
                                name="businessName"
                                label="Business name"
                                disabled={!enableField}
                                value={agent?.businessName}
                                type="text"
                                rules={{
                                  required: 'This is required',
                                }}
                              />

uj5u.com熱心網友回復：

您需要創建狀態而不是直接傳遞值agent?.businessName，InputField如以下代碼所示，我希望這會有所幫助并且也有效。謝謝

const [agent, setAgent] = useState<EstateAgentResponse | null>(null)
  const [enableField, setEnableField] = useState<boolean>(false);
  const [businessName, setBusinessName] = useState('');

  useEffect(() => {
    const fetchData = async () => {
      try {
        const { id } = params

        const agentUsers = await getEstaAgentUsers(parseInt(id!, 10))
        const agent = await getEstateAgentById(parseInt(id!, 10));
        setBusinessName(agent?.businessName);

        setAgentUsers(agentUsers)
        setAgent(agent)
      } catch (error) {
        // ToDo:
        // We should handle the error message
        toast.error(`${error}`)
      }
    }
    fetchData()
  }, [])

 const handleInputField = () => {
    setEnableField(!enableField)
  }

<PencilAltIcon className="block h-4 w-4" aria-hidden="true" onClick={handleInputField} />
                              <InputField
                                name="businessName"
                                label="Business name"
                                disabled={!enableField}
                                value={businessName}
                                onChange={e => setBusinessName(e.target.name)}
                                type="text"
                                rules={{
                                  required: 'This is required',
                                }}
                              />

在input組件中你需要添加onChange道具，你可以看到下面的代碼

<input
          {...field}
          //   required={props.required}
          disabled={props.disabled}
          value={props.value}
          onChange={props.onChange}
          type={props.type}
          autoComplete={props.autoComplete}
          pattern={props.pattern}
          className={`mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm  rounded-md ${
            error ? 'border-red-500' : 'border-gray-500'
          }
          ${
            props.disabled
              ? 'disabled:shadow-none disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200'
              : 'border-gray-500'
          } `}
        />

標籤：javascript 反应 形式

上一篇：創建一個深度嵌套的物件

下一篇：如何通過關鍵字查找特定的html元素？