如何在React.js中根据输入框字符数改变按钮颜色及禁用状态？

直接基于现有代码修改，通过React状态动态控制按钮的禁用状态和背景色：

import { useState } from 'react';

export default function App() {
  const [input, setInput] = useState("");

  const handleChange = (e) => {
    setInput(e.target.value);
  };

  const inputLength = input.length;

  return (
    <div className="App">
      <h1>hello</h1>
      <button
        disabled={inputLength < 10}
        style={{
          backgroundColor: inputLength < 20 ? 'red' : inputLength > 20 ? 'green' : '',
          padding: '8px 16px',
          color: 'white',
          border: 'none',
          borderRadius: '4px',
          cursor: inputLength < 10 ? 'not-allowed' : 'pointer'
        }}
      >
        Submit
      </button>
      <input 
        value={input} 
        onChange={handleChange}
        placeholder="输入内容..."
        style={{ marginLeft: '10px', padding: '8px' }}
      />
    </div>
  );
}

关键实现说明： #

• 禁用状态控制：给按钮绑定disabled={inputLength < 10}，当输入字符数不足10时自动禁用按钮
• 背景色逻辑：通过内联样式的backgroundColor属性做分支判断：
  • 字符数小于20时设为红色
  • 字符数大于20时设为绿色
  • 等于20时使用默认背景色（若需调整该场景样式，可修改判断条件）
• 简化长度获取：直接从状态变量input的length属性读取输入长度，无需额外维护变量，确保每次重渲染时长度都是最新值
• 额外添加了基础样式，让按钮和输入框的交互反馈更直观

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