Question

在RecipeListItem组件内部单击按钮后，函数handleFavorites已盯着我希望我的按钮 DISABLED 。

我的逻辑出了什么问题？因为这段代码不起作用......

子组件：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { addToFavorites } from '../../actions/';
import './style.css';

import Ingredients from '../../components/Ingredients';

class RecipeListItem extends Component {
  constructor() {
    super();
    this.state = {
      valueButton: false,
    };
  }

  thumbnailCheck(link) {
    if (link.length === 0) {
      // Thumbnail placeholder
      const newLink =
        'https://res.cloudinary.com/dfe57evk4/image/upload/v1506802313/no_thumb_hxdh5h.png';
      return newLink;
    }
    return link;
  }

  handleFavorites(fav) {
    this.setState({ valueButton: true });
    this.props.addToFavorites(fav);
  }

  render() {
    const { title, link, ingredients, thumbnail } = this.props;
    return (
      <li className="list-group-item">
        <img
          className="RecipeListItem-img"
          src={this.thumbnailCheck(thumbnail)}
          alt="thumbnail"
        />
        <a href={link} target="_blank">
          <span className="RecipeListItem-title">{title}</span>
        </a>
        <button
          disabled={this.state.valueButton}
          className="RecipeListItem-fav-button btn btn-secondary"
          onClick={() => this.handleFavorites([title, link])}
        >
          + Add to Fav
        </button>
        <br />
        <a href={link} target="_blank">
          <span className="RecipeListItem-full-link">Full recipe link</span>
        </a>
        <br />
        <span className="RecipeListItem-ingredients-header">Ingredients:</span>
        <Ingredients ingredients={ingredients} />
        <br />
      </li>
    );
  }
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({ addToFavorites }, dispatch);
}

export default connect(null, mapDispatchToProps)(RecipeListItem);

父组件：

import React, { Component } from 'react';
import _ from 'lodash';

import RecipeListItem from '../../containers/RecipeListItem';

class RecipeList extends Component {
  render() {
    const recipesList = this.props.recipesReady.map(oneRecipe => {
      const key = _.uniqueId('recipe_');
      return (
        <RecipeListItem
          key={key}
          title={oneRecipe.recipe.label}
          link={oneRecipe.recipe.url}
          ingredients={oneRecipe.recipe.ingredients}
          thumbnail={oneRecipe.recipe.image}
        />
      );
    });
    return (
      <div className="container">
        <div className="row justify-content-xl-center">
          <ul className="col-xl-12">{recipesList}</ul>
        </div>
      </div>
    );
  }
}

export default RecipeList;

编辑：我在想...也许在点击该按钮后，这个组件会被valueButton: false重新渲染，也许这就是原因？

---更多细节

因此按钮看起来很正常，可以点击。

仅在我手动更改时

  constructor() {
    super();
    this.state = {
      valueButton: true,
    };
  }

我有我想要的 - ＆gt;禁用按钮，它是不可点击的，它是灰色的，鼠标指针不再是鼠标，它都在引导程序内btn btn-secondary

因此代码不会改变组件内的状态，但仍然不知道为什么......

Answer 1

您必须将new_data = [] i = 0 while i < len(data): if i + 1 < len(data) and data[i + 1] == "=>": new_data.append(data[i] + data[i+1] + data[i+2]) i += 3 else: new_data.append(data[i]) i += 1绑定到其中使用handleFavorites(fav)

this

在组件内部使用setState禁用按钮不起作用

1 个答案: