如何在React基础计数器应用中添加自定义初始值输入设置功能

你只需要修改JS逻辑并补充少量CSS样式即可完成需求，HTML代码无需改动，具体修改如下：

1. JS代码修改 #

新增一个状态存储输入框的内容，添加输入框和设置按钮组件，完整修改后的JS代码如下：

const { useState } = React;

function App() {
  const [count, setCount] = useState(0);
  // 新增状态存储输入框内容
  const [inputValue, setInputValue] = useState('');

  return (
    <div className="app">
      <h1 className={count > 0 ? "positive" : count < 0 ? "negative" : null}>
        {count}
      </h1>
      <div className="button__wrapper">
        <button onClick={() => setCount(count - 1)}>-</button>
        <button onClick={() => setCount(count + 1)}>+</button>
      </div>
      {/* 新增输入框和设置按钮区域 */}
      <div className="input__wrapper">
        <input 
          type="number" 
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
          placeholder="请输入自定义数值"
        />
        <button 
          onClick={() => {
            // 转成数字，非有效数字默认设为0避免报错
            const targetVal = Number(inputValue);
            setCount(isNaN(targetVal) ? 0 : targetVal);
          }}
        >
          设置为起始值
        </button>
      </div>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

改动说明： #

• 新增inputValue状态，同步用户在输入框中输入的内容
• 新增的数字输入框绑定inputValue状态，用户输入时自动更新状态
• 设置按钮点击时将输入内容转为数字后更新到计数器count中，同时做了非法输入兼容，输入非数字内容时默认将计数器设为0

2. CSS代码补充 #

在原有CSS代码末尾添加以下样式，适配新增的输入框和按钮：

.input__wrapper {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.input__wrapper input {
  padding: 0.8rem 1rem;
  border: 1px solid $clr-gray200;
  border-radius: $radius;
  font-size: 1rem;
  font-family: inherit;
  color: $clr-gray500;
  outline: none;
  width: 14rem;
  transition: box-shadow 250ms ease-in-out;
  
  &:focus {
    box-shadow: 0 0 0 3px $clr-gray500;
  }
}

.input__wrapper button {
  padding: 0.8rem 1.5rem;
  border: none;
  border-radius: $radius;
  background-color: white;
  box-shadow: 0px 0px 10px $clr-gray200;
  font-weight: bold;
  font-size: 1rem;
  font-family: inherit;
  color: $clr-gray500;
  cursor: pointer;
  transition: background-color 250ms ease-in-out, transform 50ms ease-in-out;
  outline: none;
  
  &:hover {
    background-color: $clr-gray200;
  }
  
  &:active {
    transform: scale(0.95);
  }
  
  &:focus {
    box-shadow: 0 0 0 3px $clr-gray500;
  }
}

样式说明： #

新增的样式和原有设计风格保持统一，同时做了焦点态、hover态、点击态的交互适配，和原有按钮的交互逻辑一致。

修改完成后即可实现需求：在输入框填入任意数字，点击「设置为起始值」按钮即可直接更新计数器的数值。

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