Question

我正在创建所谓的食谱盒，您应该能够add/edit/delete食谱。初始渲染部分似乎工作得很好，但是当涉及状态并根据改变的内容更新html时我正在努力：现有的配方是否被修改，删除或添加了新的配方。

目前，我在编辑食谱时实施了状态更改触发器。通过阅读各种文章，我得出结论，如果你想在另一个元素被交互时读取另一个元素的值（在我的情况下从input元素中点击button元素时），我需要添加状态在键入时直接跟踪输入，然后使用该状态触发我想要的东西（在我的情况下，我只使用来自所谓的待处理状态的值，并在按下该按钮时设置为正常状态）。

但它似乎无法正常工作。虽然我可能做错了什么。

以下是我实施的部分：

class RecipeComponent extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            title: '',
            pendingTitle: '',
            ingredients: '',
            pendingIngredients: '',
        }
    }
    handleChange(e, key){
        let obj = {};
        obj[key] = e.target.value;
        this.setState(obj);
    }
    handleClick(){
        this.setState(
            {title: this.pendingTitle, ingredients: this.pendingIngredients});
    }
    _renderModal(target, ctx){
        return (
            <div className="modal fade" id={target} role="dialog">
                <div className="modal-dialog">
                    <div className="modal-content">
                        <div className="modal-header">
                            <button type="button" className="close" data-dismiss="modal">&times;</button>
                            <h4 className="modal-title">{ctx.title}</h4>
                        </div>
                        <div className="modal-body">
                            <div className="form-group">
                                <label htmlFor="title" className="control-label"><span>Recipe</span></label>
                                <input type="text" id="title" className="form-control" placeholder="Recipe Name" defaultValue={ctx.recipeTitle ? ctx.recipeTitle : ''}
                                    onKeyUp={(e) => this.handleChange(e, 'pendingTitle')}
                                />
                            </div>
                            <div className="form-group">
                                <label htmlFor="ingredients" className="control-label"><span>Ingredients</span></label>
                                <input type="text" id="ingredients" className="form-control" placeholder="Enter Ingredients, separated by commas" defaultValue={ctx.ingredients ? ctx.ingredients : ''}
                                    onChange={(e) => this.handleChange(e, 'pendingIngredients')}
                                />
                            </div>
                        </div>
                        <div className="modal-footer">
{/*Seems to not update state properly*/}
                            <button type="button" className="btn btn-primary" onClick={() => this.handleClick()} data-dismiss="modal">{ctx.title}</button>
                            <button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
...
...
{/*Here title from state is never set*/}
    // Should this.state.title replace default title?
    recipeTitle: this.state.title || recipe.title,
}

可以在这里找到完整的代码（如果很难理解我的意思，你也可以测试它当前是如何工作的。尝试打开任何食谱，编辑它并按下按钮Edit Recipe，什么都不会发生，食谱标题不会更改）：https://codepen.io/andriusl/pen/LjxYQo

Answer 1

您直接访问了this.pendingTitle而不是this.state.pendingTitle。所以改成这个

 handleClick(){
      this.setState(
            {title: this.state.pendingTitle, ingredients: this.state.pendingIngredients});
    }

并将此代码更改为

<a data-toggle="collapse" data-target={anchor_target}
                            href={anchor_target} className="collapsed">{this.state.title||recipe.title}

ReactJS - 状态未更新或未生效？

1 个答案: