为了账号安全,请及时绑定邮箱和手机立即绑定

如何在输入中设置来自服务器的值并更改它?

如何在输入中设置来自服务器的值并更改它?

慕姐4208626 2023-04-14 16:30:16
我有这个输入,默认情况下应该有来自服务器的值              const [nameValue, setNameValue] = useState("");              <TextField                id="outlined-read-only-input"                label="Display Name"                variant="outlined"                value={nameValue !== '' ? nameValue : name || '' }                onChange={(e) => setNameValue(e.target.value)}                onBlur={() => setName({ variables: { name: nameValue } })}               />名称- 服务器响应nameValue - 我需要发送到服务器的新值但是当我尝试更改值并且保留 1 个符号并且我想删除它时,默认返回的值问题在这里value={nameValue !== '' ? nameValue : name || '' },但我不知道如何解决export const getMeData = gql`  query {    me {      apsTraining      backgroundCheck      city      contactPreference      dateOfBirth      email      familyCupSignedUp      gender      id      name      phone      programWaiver      state      stripeEnabled      zip    }  }`const { data } = useQuery(getMeData);const name = data ? data.me.name : null
查看完整描述

2 回答

?
犯罪嫌疑人X

TA贡献2080条经验 获得超4个赞

由于空字符串("")与null不同,所以nameValue 只能为 null 一次,而一旦nameValue更改,它将始终是一个字符串。


 const [nameValue, setNameValue] = useState(null);


  return (

    <div className="App">

      <input

        id="outlined-read-only-input"

        label="Display Name"

        variant="outlined"

        value={nameValue !== null ? nameValue : name || ""}

        onChange={(e) => setNameValue(e.target.value)}

        onBlur={() => setName({ variables: { name: nameValue } })}

      />

    </div>

  );


查看完整回答
反对 回复 2023-04-14
?
素胚勾勒不出你

TA贡献1827条经验 获得超9个赞

您可以将状态设置为默认名称道具(来自 graphQL)。


 const [nameValue, setNameValue] = useState(name);


  return (

    <div className="App">

      <input

        id="outlined-read-only-input"

        label="Display Name"

        variant="outlined"

        value={nameValue}

        onChange={(e) => setNameValue(e.target.value)}

        onBlur={() => setName({ variables: { name: nameValue } })} 


      />

    </div>

  );


查看完整回答
反对 回复 2023-04-14
  • 2 回答
  • 0 关注
  • 118 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信