ReactJSインライン編集

Question

私がしようとしているのは、ユーザーがドロップダウンからオプションの1つを選択したときに、選択したオプションが下のパネルに表示されるはずです。選択を表示するときは、特定の部分/単語をテキストフィールドに置き換える必要があります。

それから、 'テキストテキストフィールドを含むようにテキストフィールドため待ち' を表示する必要があります。ユーザーは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を見つけることができる例を働きました。それがあなたを助けることを願っています