Как сделать так, чтобы компонент формы отправлялся с помощью кнопки в форме? - PullRequest
Новая
       4

Как сделать так, чтобы компонент формы отправлялся с помощью кнопки в форме?

0 голосов
/ 16 июня 2019

У меня есть следующий код, где текстовое поле ввода принимает URL-адрес, и если оно действительно, оно должно создать область отображения и обеспечить хороший предварительный просмотр URL-адреса.

Но я не уверен, как связать отправку из button с отправкой из form. 

import React, {useState} from 'react';
import './App.css';
import Microlink from '@microlink/react';
import { String } from 'core-js';
import Card from '@material-ui/core/Card';
import TextField from '@material-ui/core/TextField';
import Button from "@material-ui/core/Button";

function validURL(str) {
  var pattern = new RegExp('^(https?:\\/\\/)?'+ // protocol
    '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|'+ // domain name
    '((\\d{1,3}\\.){3}\\d{1,3}))'+ // OR ip (v4) address
    '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*'+ // port and path
    '(\\?[;&a-z\\d%_.~+=-]*)?'+ // query string
    '(\\#[-a-z\\d_]*)?$','i'); // fragment locator
  return !!pattern.test(str);
}

function App (){
  const [myurl, setMyurl] = useState("")
  const [display, setDisplay] = useState(true)

  const handleChange = (event) => {
    const url = event.target.value    
    var str = validURL(url)
    console.log(str)
    str ? setMyurl(String(url)) : setDisplay(false)
  }

  return (    
    <form>
      <TextField
        id="outlined-name"
        label="Name"        
        margin="normal"
        variant="outlined"
        onSubmit={event => handleChange(event)}        
      />
      <Button
        type="submit"
        variant="contained"                          
      >
       Submit
      </Button>

      {display ? 
      <Card>
      <Microlink url={myurl}/>;        
    </Card> : null}


    </form>

  )
}

export default App;

1 Ответ

2 голосов
/ 16 июня 2019

Вам нужно поместить onSubmit внутри тега формы следующим образом. Также необходимо иметь контролируемую форму. То есть вам нужно onChange, я написал это для вас. 

 return (    
    <form onSubmit={event => handleChange(event)} >
      <TextField
        id="outlined-name"
        label="Name"        
        margin="normal"
        variant="outlined"
        value={myurl}
        onChange={e => setMyUrl(e.target.value)}

      />
      <Button
        type="submit"
        variant="contained"                          
      >
       Submit
      </Button>

      {display ? 
      <Card>
      <Microlink url={myurl}/>;        
    </Card> : null}


    </form>

  )
}

export default App;
...