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

을 그리고 당신의 Option 구성 요소에서 소품을 전달합니다 : 그것은 다음과 같이 보일 수 있습니다 당신이 here을 찾을 수 있습니다

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

예를했다. 희망이 당신을 도울