如何实现可重用表单以在响应中添加和更新操作？

Question

我尝试在<RecipeForm />组件中实施<AddRecipe />。稍后我想重复使用相同的表单进行更新操作。 配方仍未添加到列表中。

1. 我在我的App.js中定义handleAddRecipe。
2. 将其传递给<AddRecipe />组件
3. 从此处将其传递给<RecipeForm />组件

我需要在这些组件中修复什么？

<AddRecipe />组件：

class AddRecipe extends Component {
  render() {
    return (
      <div>
      <h2>Add New Recipe:</h2>
        <RecipeForm
          handleAddRecipe={this.props.handleAddRecipe}
        />
      </div>
    )
  }
}

export default AddRecipe;

回复：https://github.com/kstulgys/fcc-recipe-box/blob/master/src/components/AddRecipe.js

我想最棘手的部分是<RecipeForm />组件：

export default class RecipeForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        url: this.props.url || '',
        title: this.props.title || '',
        description: this.props.description || '',
        error: ''
    };
  }

  onUrlChange = (e) => {
    const url = e.target.value;
    this.setState(() => ({ url }));
  };
  onTitleChange = (e) => {
    const title = e.target.value;
    this.setState(() => ({ title }));
  };
  onDescriptionChange = (e) => {
    const description = e.target.value;
    this.setState(() => ({ description }));
  };

  onSubmit = (e) => {
    e.preventDefault();
    if (!this.state.url || !this.state.title || !this.state.description) {
      this.setState(() => ({ error: 'Please provide description and amount.'}));
    } else {
      this.setState(() => ({ error: ''}));
      this.props.onSubmit({
        url: this.state.url,
        title: this.state.title,
        description: this.state.description
      });
    }
  }

  render () {
    const submitText = this.state.title ? 'Update' : 'Create' ;
    return (
      <div>
        <form onSubmit={this.onSubmit}>
          {this.state.error && <p>{this.state.error}</p>}
          <input
            type='text'
            placeholder='picture url'
            autoFocus
            value={this.state.url}
            onChange={this.onUrlChange}
          />
          <input
            type='text'
            placeholder='title'
            autoFocus
            value={this.state.title}
            onChange={this.onTitleChange}
          />
          <input
            type='text'
            placeholder='description'
            autoFocus
            value={this.state.description}
            onChange={this.onDescriptionChange}
          />
          <button>Add Expense</button>
        </form>
      </div>
    )
  }
}

Answer 1

在我看来，没有调用onSubmit函数。

• 表单上的按钮必须为type="submit"
• 您应该在带有this.onSubmit = this.onSubmit.bind(this)
的构造函数中将onSubmit函数绑定到当前作用域