반응 | 느슨한 접촉 형태 구축
26900 단어 reactwebdevbeginnersjavascript
간단한 소개
만약 전자 우편 공급자, 서버 측 논리 등의 문제를 처리해야 한다면, 연락처 리스트는 매우 짜증날 것이다.따라서 Incoming-Webhooks이라는 무료 슬랙 앱을 이용해서 이 문제를 해결할 수 있다.클라이언트 기술만 사용해서 간단한 자바스크립트를 통해 채널에 직접 발표할 수 있습니다.깔끔하죠?
기술 및 개념 포괄
이 자습서는 React에 대한 숙지를 권장합니다.그러나 그것은 상당히 기본적인 것이기 때문에, 만약 당신이 React의 초보자라면, 이 강좌는 당신에게 적합합니다.이 자습서에는 다음과 같은 기술과 개념이 사용됩니다.
이 자습서는 React에 대한 숙지를 권장합니다.그러나 그것은 상당히 기본적인 것이기 때문에, 만약 당신이 React의 초보자라면, 이 강좌는 당신에게 적합합니다.이 자습서에는 다음과 같은 기술과 개념이 사용됩니다.
선결 조건
이 강좌에 다가올 웹훅스 프로그램을 추가하기 위해서는 충분한 권한이 있는 빈 작업 공간이 필요하다.새 작업공간을 만들려면 slack.com으로 이동합니다.
들어오는 Webhooks 애플리케이션을 추가하려면 애플리케이션 시장을 검색하십시오.새 작업공간이나 기존 작업공간을 열고 사이드바의 세 가지 추가 드롭다운 목록을 사용하여 응용 프로그램을 추가합니다.
들어오는 Webhook을 찾기 위해 응용 프로그램 디렉토리를 탐색합니다.작업공간에 추가한 후 구성 탭으로 이동합니다.이 페이지에서 응용 프로그램을 연결하는 중요한 항목은 캡처를 게시할 URL입니다.구성 편집에서 URL을 찾을 때까지 아래로 스크롤합니다.이렇게 해야 합니다.
프로젝트 설정
나는 기존의 투자조합 사이트 프로젝트로 이 점을 해냈다.만약 당신이 간단한 방법을 찾고 있다면, 연락처 폼을 React 응용 프로그램 조합에 추가하면, 당신도 이렇게 할 수 있습니다.하지만 내가 사용하는 기술로 프로젝트를 처음부터 시작하려면Next를 사용해야 한다.js.그래서 계속해서 기본적인 프로젝트를 시작합니다.그들의 빠른 입문 문서는 이곳에서 Next.js을 찾을 수 있다.새 항목에 대해 선택한 디렉토리에서 다음 명령을 실행해야 합니다.
npx create-next-app
# or
yarn create next-app
다음.js는 일련의 멋진 기능을 제공하기 때문에 너무 많은 설정을 필요로 하지 않아도 시작할 수 있습니다.나는 페이지/구성 요소 형식의 구조로 응용 프로그램을 구축하는 것을 좋아한다. 페이지 레이아웃 논리는 페이지에 있고 구성 요소를 구성 요소 폴더에 다시 사용할 수 있다.논리를 얻기 위해utils 폴더가 하나 더 있습니다.이 자습서의 주요 파일은 다음과 같이 표시됩니다.
── src
│ ├── Components
│ │ ├── SlackContact
│ │ │ ├── SlackContact.js
│ ├── pages
│ │ ├── index.js
│ └── utils
├── fetchSlack.js
지금부터 이 파일들을 만들거나 나무로 돌아가 파일을 만듭니다.어떤 업무 절차든지 너에게 있어서 가장 편안한 것이다.
구성 페이지
기능 구성 요소를 사용하여 페이지 레이아웃을 시작하고 구축합니다.우리의 index.js 파일은 페이지가 있는 위치입니다. 우리는 여기서 구성 요소의 레이아웃을 제어할 수 있습니다.이 예에서 우리는 단지 하나의 구성 요소 SlackContact.js만 있다.그러나 앞을 보면 내비게이션 표시줄, 꼬리 등 페이지에 다른 항목을 추가하고 싶을 수도 있다.
다음.js는 페이지 디렉터리에서 페이지 경로를 찾기 때문에 상자를 열면 바로 사용할 수 있는 설정입니다. 매우 간단합니다.경로 /whatever에 새 페이지를 만들려면 페이지 디렉터리에 whatever.js이라는 새 파일을 만듭니다.
// index.js
import React from 'react';
import Head from 'next/head'
export default function Home() {
return (
<>
<Head>
<title>Tateronaut | Home</title>
</Head>
<main>
<p>stuff will go here!</p>
</main>
</>
)
}
간단해.너는 우리가 다음 것을 사용하고 있는 것을 볼 수 있다.js 기능과 내장된 next/head 구성 요소로 DOM의 헤더에 페이지 제목이나 링크 등을 추가할 수 있습니다.
구성 요소 초기화
알겠습니다. SlackContact.js 파일로 돌아가서 구성 요소를 시작하십시오.위와 매우 비슷합니다. ES6 arrow 함수 문법을 사용하여funzies에 기본적인 함수 구성 요소를 만듭니다.너는 내가 다른 라이브러리 "nes-react"을 사용하고 있다는 것을 알게 될 것이다. 이것은 매우 재미있는 복고 비디오 게임 스타일 라이브러리이다. 나는 매우 좋아한다.
// SlackContact.js
import React, { useState } from 'react';
import { Container } from 'nes-react';
export const SlackContact = () => {
return (
<Container title='Contact My Slackbot'>
<h1>Contact Me!</h1>
</Container>
);
};
export default SlackContact;
Sweet, 이제 페이지에서 구성 요소를 가져올 수 있습니다. index.js 파일의 가져오기를 완료할 것입니다.
// index.js
import React from 'react';
import Head from 'next/head';
import SlackContact from '../../Components/SlackContact/SlackContact';
export default function Home() {
return (
<>
<Head>
<title>Tateronaut | Home</title>
</Head>
<main>
<SlackContact />
</main>
</>
)
}
논리 가져오기
현재 우리는 슬랙 채널에 발표된 논리를 연구할 것이다.utils 폴더에 fetchSlack.js이라는 파일을 만듭니다.이것은 기본적으로 MDN's documentation에서fetch를 직접 사용하기 시작했지만 우리의 목적에 적합하다.
// fetchSlack.js
export const fetchSlack = async (url='', data={}) => {
const res = await fetch(url, {
method: 'POST', // *GET, POST, PUT, DELETE, etc.
mode: 'no-cors', // no-cors, *cors, same-origin
cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
credentials: 'include', // include, *same-origin, omit
headers: {
'Content-Type': 'application/json'
// 'Content-Type': 'application/x-www-form-urlencoded',
},
redirect: 'follow', // manual, *follow, error
referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
body: JSON.stringify(data) // body data type must match "Content-Type" header
});
return res;
}
export default fetchSlack;
SlackContact.js 구성 요소에 직접 추가할 수 있습니다.그러나 이것은 구성 요소를 더욱 혼란스럽게 하고 단원 테스트를 진행하기 어려울 것이다.논리를 /utils 폴더의 구성 요소 외에 유지하는 것은 더 읽을 수 있는 방법입니다.
연락처 설정
좋습니다. 이제 폼을 위한 UI를 만듭니다.SlackContact.js으로 전환하여 텍스트 영역과 두 개의 텍스트 입력 필드를 추가합니다.나는 nes-react에 첨부된 구성 요소를 사용하지만, 네가 원하는 모든 구성 요소를 사용할 수 있다.useState 갈고리를 추가하고 입력 필드에 로컬 상태를 설정합니다.
// SlackContact.js
import React, { useState } from 'react';
import { Container, TextInput, TextArea, Button } from "nes-react";
export const SlackContact = () => {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [message, setMessage] = useState('');
return (
<Container title="Contact My Slackbot" className='slack-contact'>
<TextInput
label="Name"
placeholder="Input Name"
value={name}
onChange={e => {setName(e.target.value)}}
/>
<TextInput
label="Email"
placeholder="Input Email"
value={email}
onChange={e => {setEmail(e.target.value)}}
/>
<TextArea
label="Message"
placeholder="Start Writing"
value={message}
onChange={e => {setMessage(e.target.value)}}
/>
<Button onClick={handleClick} success>SEND IT!</Button>
</Container>
);
};
export default SlackContact
;
이것은 효과적인 연락처로 당신이 있는 주의 정보를 어디든지 보낼 수 있다.현재, 이것은 단지 아름다운 UI일 뿐이지만,submit 단추를 사용할 때, 아무것도 할 수 없습니다.handleClick이 정의되어 있지 않습니다.지금 그것을 넣읍시다.여기에 fetchSlack 폴더에 작성된 /utils 함수를 도입합니다.이 강좌의 선결 조건 부분에서 전송된 웹훅스 프로그램 설정에서 얻은 URL을 정의하고 추가해야 합니다.보안상의 이유로, 다른 사람들이 URL을 코드 라이브러리에서 삭제해서 채널에 올릴 수 없도록 .env 파일에 저장하기를 원할 수도 있습니다.하지만 이것은 이 프로젝트의 범위를 넘어섰다.업데이트된 SlackContact.js 파일은 다음과 같습니다.
// SlackContact.js
import React, { useState } from 'react';
import { Container, TextInput, TextArea, Button } from "nes-react";
/** helpers */
import fetchSlack from '../../utils/fetchSlack';
export const SlackContact = () => {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [message, setMessage] = useState('');
const webhookURL = '<YOUR WEBHOOK URL>';
const myData = {
"text": `Name: ${name} \n${email} \n${message}`
}
const handleClick = () => {
fetchSlack(webhookURL, myData)
.then(response => console.log(response))
.then(data=>{
return data;
})
.catch(err => {
console.error('There was an ERROR!!!',err)
});
}
return (
<Container title="Contact My Slackbot" className='slack-contact'>
<TextInput
label="Name"
placeholder="Input Name"
value={name}
onChange={e => {setName(e.target.value)}}
/>
<TextInput
label="Email"
placeholder="Input Email"
value={email}
onChange={e => {setEmail(e.target.value)}}
/>
<TextArea
label="Message"
placeholder="Start Writing"
value={message}
onChange={e => {setMessage(e.target.value)}}
/>
<Button onClick={handleClick} success>SEND IT!</Button>
</Container>
);
};
export default SlackContact
;
결론
이것은 네가 느슨한 채널에 글을 올리기 시작하는 데 필요한 모든 내용일 것이다.나는 그것이 충분히 명확해서 계속할 수 있기를 바란다.만약 내가 무엇을 빠뜨렸거나 뚜렷하게 보이지 않는다면 평론에서 나에게 알려주세요.
다음 단계에서 기본적인 폼 검증을 추가해야 할 수도 있습니다.우리는 모든 텍스트 입력의 onChange 함수를 개선함으로써 이 점을 실현할 수 있다.예를 들어 전자메일이 간단한 전자메일 요구에 부합되는지 확인하는 것이 좋다.또한useState 항목을 로컬 상태로 옮기고 Redux 등 상태 관리 도구를 사용하여 프로그램의 다른 구성 요소가 이 값에 접근할 수 있도록 합니다. 이것은 도움이 될 수 있습니다.
나는 네가 이 문장을 좋아하길 바란다.
Reference
이 문제에 관하여(반응 | 느슨한 접촉 형태 구축), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/tateronaut/react-build-a-slack-contact-form-4i53
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
나는 기존의 투자조합 사이트 프로젝트로 이 점을 해냈다.만약 당신이 간단한 방법을 찾고 있다면, 연락처 폼을 React 응용 프로그램 조합에 추가하면, 당신도 이렇게 할 수 있습니다.하지만 내가 사용하는 기술로 프로젝트를 처음부터 시작하려면Next를 사용해야 한다.js.그래서 계속해서 기본적인 프로젝트를 시작합니다.그들의 빠른 입문 문서는 이곳에서 Next.js을 찾을 수 있다.새 항목에 대해 선택한 디렉토리에서 다음 명령을 실행해야 합니다.
npx create-next-app
# or
yarn create next-app
── src
│ ├── Components
│ │ ├── SlackContact
│ │ │ ├── SlackContact.js
│ ├── pages
│ │ ├── index.js
│ └── utils
├── fetchSlack.js
구성 페이지
기능 구성 요소를 사용하여 페이지 레이아웃을 시작하고 구축합니다.우리의 index.js 파일은 페이지가 있는 위치입니다. 우리는 여기서 구성 요소의 레이아웃을 제어할 수 있습니다.이 예에서 우리는 단지 하나의 구성 요소 SlackContact.js만 있다.그러나 앞을 보면 내비게이션 표시줄, 꼬리 등 페이지에 다른 항목을 추가하고 싶을 수도 있다.
다음.js는 페이지 디렉터리에서 페이지 경로를 찾기 때문에 상자를 열면 바로 사용할 수 있는 설정입니다. 매우 간단합니다.경로 /whatever에 새 페이지를 만들려면 페이지 디렉터리에 whatever.js이라는 새 파일을 만듭니다.
// index.js
import React from 'react';
import Head from 'next/head'
export default function Home() {
return (
<>
<Head>
<title>Tateronaut | Home</title>
</Head>
<main>
<p>stuff will go here!</p>
</main>
</>
)
}
간단해.너는 우리가 다음 것을 사용하고 있는 것을 볼 수 있다.js 기능과 내장된 next/head 구성 요소로 DOM의 헤더에 페이지 제목이나 링크 등을 추가할 수 있습니다.
구성 요소 초기화
알겠습니다. SlackContact.js 파일로 돌아가서 구성 요소를 시작하십시오.위와 매우 비슷합니다. ES6 arrow 함수 문법을 사용하여funzies에 기본적인 함수 구성 요소를 만듭니다.너는 내가 다른 라이브러리 "nes-react"을 사용하고 있다는 것을 알게 될 것이다. 이것은 매우 재미있는 복고 비디오 게임 스타일 라이브러리이다. 나는 매우 좋아한다.
// SlackContact.js
import React, { useState } from 'react';
import { Container } from 'nes-react';
export const SlackContact = () => {
return (
<Container title='Contact My Slackbot'>
<h1>Contact Me!</h1>
</Container>
);
};
export default SlackContact;
Sweet, 이제 페이지에서 구성 요소를 가져올 수 있습니다. index.js 파일의 가져오기를 완료할 것입니다.
// index.js
import React from 'react';
import Head from 'next/head';
import SlackContact from '../../Components/SlackContact/SlackContact';
export default function Home() {
return (
<>
<Head>
<title>Tateronaut | Home</title>
</Head>
<main>
<SlackContact />
</main>
</>
)
}
논리 가져오기
현재 우리는 슬랙 채널에 발표된 논리를 연구할 것이다.utils 폴더에 fetchSlack.js이라는 파일을 만듭니다.이것은 기본적으로 MDN's documentation에서fetch를 직접 사용하기 시작했지만 우리의 목적에 적합하다.
// fetchSlack.js
export const fetchSlack = async (url='', data={}) => {
const res = await fetch(url, {
method: 'POST', // *GET, POST, PUT, DELETE, etc.
mode: 'no-cors', // no-cors, *cors, same-origin
cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
credentials: 'include', // include, *same-origin, omit
headers: {
'Content-Type': 'application/json'
// 'Content-Type': 'application/x-www-form-urlencoded',
},
redirect: 'follow', // manual, *follow, error
referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
body: JSON.stringify(data) // body data type must match "Content-Type" header
});
return res;
}
export default fetchSlack;
SlackContact.js 구성 요소에 직접 추가할 수 있습니다.그러나 이것은 구성 요소를 더욱 혼란스럽게 하고 단원 테스트를 진행하기 어려울 것이다.논리를 /utils 폴더의 구성 요소 외에 유지하는 것은 더 읽을 수 있는 방법입니다.
연락처 설정
좋습니다. 이제 폼을 위한 UI를 만듭니다.SlackContact.js으로 전환하여 텍스트 영역과 두 개의 텍스트 입력 필드를 추가합니다.나는 nes-react에 첨부된 구성 요소를 사용하지만, 네가 원하는 모든 구성 요소를 사용할 수 있다.useState 갈고리를 추가하고 입력 필드에 로컬 상태를 설정합니다.
// SlackContact.js
import React, { useState } from 'react';
import { Container, TextInput, TextArea, Button } from "nes-react";
export const SlackContact = () => {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [message, setMessage] = useState('');
return (
<Container title="Contact My Slackbot" className='slack-contact'>
<TextInput
label="Name"
placeholder="Input Name"
value={name}
onChange={e => {setName(e.target.value)}}
/>
<TextInput
label="Email"
placeholder="Input Email"
value={email}
onChange={e => {setEmail(e.target.value)}}
/>
<TextArea
label="Message"
placeholder="Start Writing"
value={message}
onChange={e => {setMessage(e.target.value)}}
/>
<Button onClick={handleClick} success>SEND IT!</Button>
</Container>
);
};
export default SlackContact
;
이것은 효과적인 연락처로 당신이 있는 주의 정보를 어디든지 보낼 수 있다.현재, 이것은 단지 아름다운 UI일 뿐이지만,submit 단추를 사용할 때, 아무것도 할 수 없습니다.handleClick이 정의되어 있지 않습니다.지금 그것을 넣읍시다.여기에 fetchSlack 폴더에 작성된 /utils 함수를 도입합니다.이 강좌의 선결 조건 부분에서 전송된 웹훅스 프로그램 설정에서 얻은 URL을 정의하고 추가해야 합니다.보안상의 이유로, 다른 사람들이 URL을 코드 라이브러리에서 삭제해서 채널에 올릴 수 없도록 .env 파일에 저장하기를 원할 수도 있습니다.하지만 이것은 이 프로젝트의 범위를 넘어섰다.업데이트된 SlackContact.js 파일은 다음과 같습니다.
// SlackContact.js
import React, { useState } from 'react';
import { Container, TextInput, TextArea, Button } from "nes-react";
/** helpers */
import fetchSlack from '../../utils/fetchSlack';
export const SlackContact = () => {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [message, setMessage] = useState('');
const webhookURL = '<YOUR WEBHOOK URL>';
const myData = {
"text": `Name: ${name} \n${email} \n${message}`
}
const handleClick = () => {
fetchSlack(webhookURL, myData)
.then(response => console.log(response))
.then(data=>{
return data;
})
.catch(err => {
console.error('There was an ERROR!!!',err)
});
}
return (
<Container title="Contact My Slackbot" className='slack-contact'>
<TextInput
label="Name"
placeholder="Input Name"
value={name}
onChange={e => {setName(e.target.value)}}
/>
<TextInput
label="Email"
placeholder="Input Email"
value={email}
onChange={e => {setEmail(e.target.value)}}
/>
<TextArea
label="Message"
placeholder="Start Writing"
value={message}
onChange={e => {setMessage(e.target.value)}}
/>
<Button onClick={handleClick} success>SEND IT!</Button>
</Container>
);
};
export default SlackContact
;
결론
이것은 네가 느슨한 채널에 글을 올리기 시작하는 데 필요한 모든 내용일 것이다.나는 그것이 충분히 명확해서 계속할 수 있기를 바란다.만약 내가 무엇을 빠뜨렸거나 뚜렷하게 보이지 않는다면 평론에서 나에게 알려주세요.
다음 단계에서 기본적인 폼 검증을 추가해야 할 수도 있습니다.우리는 모든 텍스트 입력의 onChange 함수를 개선함으로써 이 점을 실현할 수 있다.예를 들어 전자메일이 간단한 전자메일 요구에 부합되는지 확인하는 것이 좋다.또한useState 항목을 로컬 상태로 옮기고 Redux 등 상태 관리 도구를 사용하여 프로그램의 다른 구성 요소가 이 값에 접근할 수 있도록 합니다. 이것은 도움이 될 수 있습니다.
나는 네가 이 문장을 좋아하길 바란다.
Reference
이 문제에 관하여(반응 | 느슨한 접촉 형태 구축), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/tateronaut/react-build-a-slack-contact-form-4i53
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
// index.js
import React from 'react';
import Head from 'next/head'
export default function Home() {
return (
<>
<Head>
<title>Tateronaut | Home</title>
</Head>
<main>
<p>stuff will go here!</p>
</main>
</>
)
}
// SlackContact.js
import React, { useState } from 'react';
import { Container } from 'nes-react';
export const SlackContact = () => {
return (
<Container title='Contact My Slackbot'>
<h1>Contact Me!</h1>
</Container>
);
};
export default SlackContact;
// index.js
import React from 'react';
import Head from 'next/head';
import SlackContact from '../../Components/SlackContact/SlackContact';
export default function Home() {
return (
<>
<Head>
<title>Tateronaut | Home</title>
</Head>
<main>
<SlackContact />
</main>
</>
)
}
현재 우리는 슬랙 채널에 발표된 논리를 연구할 것이다.
utils 폴더에 fetchSlack.js이라는 파일을 만듭니다.이것은 기본적으로 MDN's documentation에서fetch를 직접 사용하기 시작했지만 우리의 목적에 적합하다.// fetchSlack.js
export const fetchSlack = async (url='', data={}) => {
const res = await fetch(url, {
method: 'POST', // *GET, POST, PUT, DELETE, etc.
mode: 'no-cors', // no-cors, *cors, same-origin
cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
credentials: 'include', // include, *same-origin, omit
headers: {
'Content-Type': 'application/json'
// 'Content-Type': 'application/x-www-form-urlencoded',
},
redirect: 'follow', // manual, *follow, error
referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
body: JSON.stringify(data) // body data type must match "Content-Type" header
});
return res;
}
export default fetchSlack;
SlackContact.js 구성 요소에 직접 추가할 수 있습니다.그러나 이것은 구성 요소를 더욱 혼란스럽게 하고 단원 테스트를 진행하기 어려울 것이다.논리를 /utils 폴더의 구성 요소 외에 유지하는 것은 더 읽을 수 있는 방법입니다.연락처 설정
좋습니다. 이제 폼을 위한 UI를 만듭니다.SlackContact.js으로 전환하여 텍스트 영역과 두 개의 텍스트 입력 필드를 추가합니다.나는 nes-react에 첨부된 구성 요소를 사용하지만, 네가 원하는 모든 구성 요소를 사용할 수 있다.useState 갈고리를 추가하고 입력 필드에 로컬 상태를 설정합니다.
// SlackContact.js
import React, { useState } from 'react';
import { Container, TextInput, TextArea, Button } from "nes-react";
export const SlackContact = () => {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [message, setMessage] = useState('');
return (
<Container title="Contact My Slackbot" className='slack-contact'>
<TextInput
label="Name"
placeholder="Input Name"
value={name}
onChange={e => {setName(e.target.value)}}
/>
<TextInput
label="Email"
placeholder="Input Email"
value={email}
onChange={e => {setEmail(e.target.value)}}
/>
<TextArea
label="Message"
placeholder="Start Writing"
value={message}
onChange={e => {setMessage(e.target.value)}}
/>
<Button onClick={handleClick} success>SEND IT!</Button>
</Container>
);
};
export default SlackContact
;
이것은 효과적인 연락처로 당신이 있는 주의 정보를 어디든지 보낼 수 있다.현재, 이것은 단지 아름다운 UI일 뿐이지만,submit 단추를 사용할 때, 아무것도 할 수 없습니다.handleClick이 정의되어 있지 않습니다.지금 그것을 넣읍시다.여기에 fetchSlack 폴더에 작성된 /utils 함수를 도입합니다.이 강좌의 선결 조건 부분에서 전송된 웹훅스 프로그램 설정에서 얻은 URL을 정의하고 추가해야 합니다.보안상의 이유로, 다른 사람들이 URL을 코드 라이브러리에서 삭제해서 채널에 올릴 수 없도록 .env 파일에 저장하기를 원할 수도 있습니다.하지만 이것은 이 프로젝트의 범위를 넘어섰다.업데이트된 SlackContact.js 파일은 다음과 같습니다.
// SlackContact.js
import React, { useState } from 'react';
import { Container, TextInput, TextArea, Button } from "nes-react";
/** helpers */
import fetchSlack from '../../utils/fetchSlack';
export const SlackContact = () => {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [message, setMessage] = useState('');
const webhookURL = '<YOUR WEBHOOK URL>';
const myData = {
"text": `Name: ${name} \n${email} \n${message}`
}
const handleClick = () => {
fetchSlack(webhookURL, myData)
.then(response => console.log(response))
.then(data=>{
return data;
})
.catch(err => {
console.error('There was an ERROR!!!',err)
});
}
return (
<Container title="Contact My Slackbot" className='slack-contact'>
<TextInput
label="Name"
placeholder="Input Name"
value={name}
onChange={e => {setName(e.target.value)}}
/>
<TextInput
label="Email"
placeholder="Input Email"
value={email}
onChange={e => {setEmail(e.target.value)}}
/>
<TextArea
label="Message"
placeholder="Start Writing"
value={message}
onChange={e => {setMessage(e.target.value)}}
/>
<Button onClick={handleClick} success>SEND IT!</Button>
</Container>
);
};
export default SlackContact
;
결론
이것은 네가 느슨한 채널에 글을 올리기 시작하는 데 필요한 모든 내용일 것이다.나는 그것이 충분히 명확해서 계속할 수 있기를 바란다.만약 내가 무엇을 빠뜨렸거나 뚜렷하게 보이지 않는다면 평론에서 나에게 알려주세요.
다음 단계에서 기본적인 폼 검증을 추가해야 할 수도 있습니다.우리는 모든 텍스트 입력의 onChange 함수를 개선함으로써 이 점을 실현할 수 있다.예를 들어 전자메일이 간단한 전자메일 요구에 부합되는지 확인하는 것이 좋다.또한useState 항목을 로컬 상태로 옮기고 Redux 등 상태 관리 도구를 사용하여 프로그램의 다른 구성 요소가 이 값에 접근할 수 있도록 합니다. 이것은 도움이 될 수 있습니다.
나는 네가 이 문장을 좋아하길 바란다.
Reference
이 문제에 관하여(반응 | 느슨한 접촉 형태 구축), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/tateronaut/react-build-a-slack-contact-form-4i53
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
// SlackContact.js
import React, { useState } from 'react';
import { Container, TextInput, TextArea, Button } from "nes-react";
export const SlackContact = () => {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [message, setMessage] = useState('');
return (
<Container title="Contact My Slackbot" className='slack-contact'>
<TextInput
label="Name"
placeholder="Input Name"
value={name}
onChange={e => {setName(e.target.value)}}
/>
<TextInput
label="Email"
placeholder="Input Email"
value={email}
onChange={e => {setEmail(e.target.value)}}
/>
<TextArea
label="Message"
placeholder="Start Writing"
value={message}
onChange={e => {setMessage(e.target.value)}}
/>
<Button onClick={handleClick} success>SEND IT!</Button>
</Container>
);
};
export default SlackContact
;
// SlackContact.js
import React, { useState } from 'react';
import { Container, TextInput, TextArea, Button } from "nes-react";
/** helpers */
import fetchSlack from '../../utils/fetchSlack';
export const SlackContact = () => {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [message, setMessage] = useState('');
const webhookURL = '<YOUR WEBHOOK URL>';
const myData = {
"text": `Name: ${name} \n${email} \n${message}`
}
const handleClick = () => {
fetchSlack(webhookURL, myData)
.then(response => console.log(response))
.then(data=>{
return data;
})
.catch(err => {
console.error('There was an ERROR!!!',err)
});
}
return (
<Container title="Contact My Slackbot" className='slack-contact'>
<TextInput
label="Name"
placeholder="Input Name"
value={name}
onChange={e => {setName(e.target.value)}}
/>
<TextInput
label="Email"
placeholder="Input Email"
value={email}
onChange={e => {setEmail(e.target.value)}}
/>
<TextArea
label="Message"
placeholder="Start Writing"
value={message}
onChange={e => {setMessage(e.target.value)}}
/>
<Button onClick={handleClick} success>SEND IT!</Button>
</Container>
);
};
export default SlackContact
;
이것은 네가 느슨한 채널에 글을 올리기 시작하는 데 필요한 모든 내용일 것이다.나는 그것이 충분히 명확해서 계속할 수 있기를 바란다.만약 내가 무엇을 빠뜨렸거나 뚜렷하게 보이지 않는다면 평론에서 나에게 알려주세요.
다음 단계에서 기본적인 폼 검증을 추가해야 할 수도 있습니다.우리는 모든 텍스트 입력의
onChange 함수를 개선함으로써 이 점을 실현할 수 있다.예를 들어 전자메일이 간단한 전자메일 요구에 부합되는지 확인하는 것이 좋다.또한useState 항목을 로컬 상태로 옮기고 Redux 등 상태 관리 도구를 사용하여 프로그램의 다른 구성 요소가 이 값에 접근할 수 있도록 합니다. 이것은 도움이 될 수 있습니다.나는 네가 이 문장을 좋아하길 바란다.
Reference
이 문제에 관하여(반응 | 느슨한 접촉 형태 구축), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/tateronaut/react-build-a-slack-contact-form-4i53텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
