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

并从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。希望它能帮到你

ReactJS内联编辑

1 个答案: