React中如何实现input禁用时显示编辑前默认值？

我看了你的代码，核心问题在于你使用了非受控组件的defaultValue属性——它只会在组件首次渲染时生效，当用户编辑输入框后，即使把disabled设为true，输入框依然会保留用户编辑后的内容，而不会自动回退到原始的默认值。要实现你想要的效果，我们需要把输入框改成受控组件，通过状态来精确控制输入框的显示内容。

下面是修改后的完整代码：

const List = (props) => (
  <div className="list">
    {props.data.length > 0 && props.data.map((item, index) => (
      <div style={{ marginTop: '10px' }} key={index}>
        {/* 根据disabled状态决定显示的内容 */}
        <input
          type="text"
          value={props.copyData[index] ? item.text : props.editValues[index]}
          disabled={props.copyData[index]}
          onChange={(e) => props.handleInputChange(index, e.target.value)}
        />
        <button onClick={() => props.toggle(index)}> Click to toggle </button>
      </div>
    ))}
  </div>
);

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [
        { text: 'Some text 1' },
        { text: 'Some text 2' },
        { text: 'Some text 3' },
      ],
      copyData: [false, false, false],
      // 新增状态，保存用户的编辑内容，初始值等于原始默认值
      editValues: ['Some text 1', 'Some text 2', 'Some text 3']
    };
  }

  toggle = (index) => {
    let temp = this.state.copyData.slice();
    temp[index] = !temp[index];
    this.setState({ copyData: temp });
  }

  // 新增处理输入变化的方法，更新对应位置的编辑内容
  handleInputChange = (index, value) => {
    const newEditValues = [...this.state.editValues];
    newEditValues[index] = value;
    this.setState({ editValues: newEditValues });
  }

  render() {
    const { data, copyData, editValues } = this.state;
    return (
      <div className="App">
        <List
          data={data}
          copyData={copyData}
          toggle={this.toggle}
          editValues={editValues}
          handleInputChange={this.handleInputChange}
        />
      </div>
    );
  }
}

关键修改点说明： #

• 新增editValues状态：用于保存用户对每个输入框的编辑内容，初始值和data里的原始默认值一致。
• 受控输入框：将defaultValue替换为value，根据disabled状态动态决定显示内容：
  • 当disabled={true}时，显示item.text（原始默认值）
  • 当disabled={false}时，显示editValues[index]（用户当前编辑的内容）
• 新增handleInputChange方法：当用户在可编辑状态下输入时，更新editValues中对应位置的值，确保输入内容能被正确维护。
• 添加key属性：在map生成的元素上添加key={index}，符合React的列表渲染规范，避免警告。

这样修改后，就能完美实现你的需求：输入框可编辑时允许用户修改内容，禁用时自动回退并显示原始的默认值。

内容的提问来源于stack exchange，提问作者Phát Nguyễn