React에서 텍스트 영역의 줄 바꿈

Question

기존 배열을 기반으로 텍스트 영역의 값을 설정하려고하지만 배열 영역을 텍스트 영역의 새 줄로 구분하고 싶습니다. textarea의 내용을 클립 보드에 복사 할 수있는 버튼을 만들 수 있도록 정렬되지 않은 목록의 항목을 텍스트 영역에 넣길 원합니다.

이 오류가 발생합니다. 유니 코드 이스케이프 시퀀스가 ​​필요합니다. \ uXXXX \ n 때문에 생각합니다. 나는 그 밖의 무엇을 해야할지 정말로 모른다. 귀하의 도움에 미리 감사드립니다. 배열로

Answer 1

class NamesList extends Component{ 
 
\t constructor(props){ 
 
\t \t super(props); 
 

 
\t } 
 

 
\t render(){ 
 
\t \t const RenderedNames = this.props.formattedNames.map((name, index) => { 
 
\t \t \t return <li key={index} >{name}</li> 
 
\t \t }); 
 

 
\t \t const formattedNamesBreak = this.props.formattedNames.map((name, index) => { 
 
\t \t \t return name \n 
 
\t \t }); 
 

 
\t \t return(
 
\t \t \t <div> 
 
\t \t \t <ul className='media-list list-group'> 
 
\t \t \t \t {RenderedNames} 
 
\t \t \t </ul> 
 
\t \t \t <textarea className='hidden' readOnly='true' value={formattedNamesBreak}></textarea> 
 
\t \t \t </div> 
 
\t \t); 
 
\t } 
 
\t 
 
}; 
 

 

 
export default NamesList;

는 출력에 같은 배열을 시도하는 경우 문자열 (이름)의 배열은, 당신이이 결과 배열을 만들 것 때문에 map()에 필요하지 않는 것입니다 textarea 값이면 쉼표가있는 문자열로 변환되어 값을 구분합니다.

var formattedNamesBreak = this.props.formattedNames.join('\n');