如何通过点击按钮禁用TextField组件

核心思路是通过状态变量控制TextField的disabled/enabled属性，点击按钮时切换该状态的值即可。

以下是不同开发场景下的具体实现：

原生HTML + JavaScript #

<input type="text" id="myTextField" value="可编辑内容">
<button id="disableBtn">点击禁用输入框</button>

<script>
const textField = document.getElementById('myTextField');
const btn = document.getElementById('disableBtn');

btn.addEventListener('click', () => {
  textField.disabled = true;
  // 如需点击后同步禁用按钮可额外加一行 btn.disabled = true
})
</script>

React 实现 #

import { useState } from 'react';

function App() {
  const [isDisabled, setIsDisabled] = useState(false);

  return (
    <div>
      <input 
        type="text" 
        disabled={isDisabled} 
        defaultValue="可编辑内容"
      />
      <button onClick={() => setIsDisabled(true)}>
        点击禁用输入框
      </button>
    </div>
  )
}

Vue3 实现 #

<template>
  <input 
    type="text" 
    :disabled="isDisabled" 
    value="可编辑内容"
  />
  <button @click="isDisabled = true">点击禁用输入框</button>
</template>

<script setup>
import { ref } from 'vue';
const isDisabled = ref(false);
</script>

Flutter 实现 #

import 'package:flutter/material.dart';

class MyWidget extends StatefulWidget {
  const MyWidget({super.key});

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  bool _isDisabled = false;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextField(
          enabled: !_isDisabled,
          decoration: const InputDecoration(hintText: "可编辑内容"),
        ),
        ElevatedButton(
          onPressed: () => setState(() => _isDisabled = true),
          child: const Text("点击禁用输入框"),
        )
      ],
    );
  }
}

如果需要实现点击按钮切换禁用/启用状态，把赋值为true的逻辑改成状态取反即可，比如React场景下修改为setIsDisabled(prev => !prev)。

内容的提问来源于stack exchange，提问作者Nina