为 jsx 反应多个状态常量答案

【问题标题】：react multiple state const for jsx为 jsx 反应多个状态常量
【发布时间】：2018-01-26 19:37:08
【问题描述】：

我想在 isEditingAll 设置为 true 时将 jsx 呈现为一个输入字段，其中父组件可以将其设置为 true。但我也希望组件本身能够单独保存数据。所以当 isEditing 为真时，我也在渲染相同的输入字段。我有以下代码：

return(
    <span className="displayList ">
        <div className="flex-label"><label className="flex-label-size">Author: </label>
        {this.state.isEditingAll ?
            <span className="flex-label-size"><input name="inputValue" className="inputValue" value={this.state.value} type="text" onKeyPress={this.handleKeyPress} onChange={this.onTextChanged}/></span>
            :
            this.state.isEditing ? '' : <span className="clickMe flex-label-size" onClick={this.onClickEdit}>{this.state.value}</span> &&
            this.state.isEditing ? <span className="flex-label-size"><input name="inputValue" className="inputValue" value={this.state.value} type="text" onKeyPress={this.handleKeyPress} onChange={this.onTextChanged}/></span> : ''&&
            this.state.isEditing ? <button className="saveMe" onClick={this.onSaveEdit}>Save</button> :''
        }
        </div>
    </span>
)

我的输入字段被重复了两次，无论如何要在 return 之外使用 const 来传递输入以多次使用它并且只使用一次 jsx？

【问题讨论】：

您能否更好地阐明您希望为isEditingAll 和isEditing 的每个组合分别显示的内容是：（1）true 和true，（2）true和false，（3）false和true，（4）false和false。

标签： reactjs react-redux

【解决方案1】：

您应该避免使用这样的三级运算符。由于这些链接的方法，您的代码非常难以阅读，而您的错误的原因是由于这些三级运算符的组合方式。与其修复错误，不如重构以避免不必要的混淆；

相反，只需创建一个访问方法：

getInputField() {
    if ( this.props.isEditingAll || this.state.isEditing ) {
        return <span className="flex-label-size"><input name="inputValue" className="inputValue" value={this.state.value} type="text" onKeyPress={this.handleKeyPress} onChange={this.onTextChanged}/></span>
    }
}

然后在你的渲染函数中调用：

{this.getInputField()}

【讨论】：

这对那个字段有好处，但是我需要将它与保存按钮结合起来，只有当 isEditing 为真时。我该如何结合呢？
创建第二个访问器函数getSaveButton。相应地更新条件和返回值。

【解决方案2】：

是的，有一个很好的方法来做到这一点。

示例（使用输入字段设置 const）：

render() {
    const inputField = (<input name="inputValue" className="inputValue" value={this.state.value} type="text" onKeyPress={this.handleKeyPress} onChange={this.onTextChanged}/>);
    return(
        <span className="displayList ">
            <div className="flex-label"><label className="flex-label-size">Author: </label>
            {this.state.isEditingAll ? (
              <span className="flex-label-size"><input name="inputValue" className="inputValue" value={this.state.value} type="text" onKeyPress={this.handleKeyPress} onChange={this.onTextChanged}/></span>
            ) : (
              this.state.isEditing ? '' : <span className="clickMe flex-label-size" onClick={this.onClickEdit}>{this.state.value}</span> &&
              this.state.isEditing ? <span className="flex-label-size"> {inputField} </span> : ''&&
              this.state.isEditing ? <button className="saveMe" onClick={this.onSaveEdit}>Save</button> :''
            )}
    </div>
</span>

问候，

仁南

【讨论】：