Question

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

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>
)

我的输入字段是重复的两次，无论如何都要使用返回的const之外的输入来多次使用它而只使用jsx一次？

Answer 1

你应该避免使用像这样的第三级运算符。由于这些链式方法，您的代码难以阅读，并且您的错误的原因是由于这些第三级运算符的组合。而不是修复bug，你应该重构以避免不必要的混淆;

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

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()}

Answer 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>

此致

Renan的

为jsx做出多个状态const的反应

2 个答案: