ReactJS 内联编辑

Question

我想做的是，当用户从下拉列表中选择其中一个选项时，所选选项应显示在下面的面板中。显示选择时，某些部分/单词应替换为文本字段。

然后应该显示“等待文本字段包含文本文本字段”。这样用户就能够输入 ElementKey 和 ExpectedText 的值。

到目前为止，我尝试做的是，通过字符串操作找出标签的位置并将其替换为文本字段。

displayInputBox = (event, str) => {
    let strArr = str.split(" ");
    let newArr = [];
    let newStr = "<div> </div>";
    console.log(strArr);
    for (var i = 0, tot = strArr.length; i < tot; i++) {

        if (strArr[i].includes("<")) {
            newArr.push(<FormControl type="text" placeholder={strArr[i]} />);

        } else {
            newArr.push(strArr[i]);
        }
    }
    return (newArr);
}

这可行，但在打印数组时我们还需要提供唯一的 ID。

我知道这不是一个有效的解决方案，我可以尝试其他有效的方法吗？

我也在使用 Redux，但我不想维护各个文本字段值的状态。

有没有像react-inline-edit这样的库可以帮助我？

欢迎任何建议。

提前谢谢你:)

Answer 1

我认为这是您正在寻找的东西，对于样式感到抱歉，但无论如何。因此，我们的想法是将可编辑选项分离到单独的组件中(Editable)。它可能如下所示:

const Editable = ({text, field, value, onFieldChange, onValueChange}) => (
  <div>
    {text[0]}
    <input name="field" type="text" value={field} onChange={onFieldChange}/>
    {text[1]}
    <input name="value" type="text" value={value} onChange={onValueChange}/>
  </div>
)

并将 Prop 从您的 Option 组件传递给它:

class Option extends React.Component {
  constructor(props){
    super(props);
    this.state = {
        text: ['wait for ', ' to contain text '],
        isEditable: true,
        field: 'text-key',
        value: 'text-value'
    }

    this.onEdit = this.onEdit.bind(this)
  }

  onEdit(e){
    this.setState({
        [e.target.name] : e.target.value
    })
  }

  render(){
    const {field, value, text} = this.state;
    return (
      <div>
        {this.state.isEditable
          && <Editable
              text={text}
              field={field}
              value={value}
              onFieldChange={this.onEdit}
              onValueChange={this.onEdit}
            />
        }
        {!this.state.isEditable && <div>Key: {this.state.field} Value: {this.state.value}</div>}
        <button onClick={() => this.setState({isEditable: !this.state.isEditable})}>Toggle</button>
      </div>
    )
  }
}

您可以找到here的工作示例。希望对您有帮助