在preact中重用"add todo“组件作为"edit todo”

import { h, Component } from 'preact';

class AddTodo extends Component {
  state = {
    title: '',
    description: ''
  };

  handleChange = (e) => {
    this.setState({ [e.target.name]: e.target.value });
  };

  handleSubmit = (e) => {
    e.preventDefault();
    const { title, description } = this.state;
    if (this.props.isEditing) {
      // 调用编辑逻辑
      this.props.onEdit({ title, description });
    } else {
      // 调用添加逻辑
      this.props.onAdd({ title, description });
    }
    this.setState({ title: '', description: '' });
  };

  render() {
    const { title, description } = this.state;
    return (
      <form onSubmit={this.handleSubmit}>
        <input
          type="text"
          name="title"
          value={title}
          onChange={this.handleChange}
          placeholder="Title"
        />
        <textarea
          name="description"
          value={description}
          onChange={this.handleChange}
          placeholder="Description"
        />
        <button type="submit">{this.props.isEditing ? 'Edit Todo' : 'Add Todo'}</button>
      </form>
    );
  }
}

export default AddTodo;

import { h } from 'preact';
import AddTodo from './AddTodo';

const App = () => {
  const handleAdd = (todo) => {
    console.log('Adding todo:', todo);
  };

  const handleEdit = (todo) => {
    console.log('Editing todo:', todo);
  };

  return (
    <div>
      <AddTodo onAdd={handleAdd} />
      <AddTodo isEditing onEdit={handleEdit} />
    </div>
  );
};

export default App;

<AddTodo isEditing initialData={initialTodoData} onEdit={handleEdit} />

componentDidMount() {
  if (this.props.isEditing && this.props.initialData) {
    this.setState(this.props.initialData);
  }
}