reactjs 如何使用axios和原生php作为后台向数据库发送值

txu3uszq  于 2023-01-12  发布在  React
关注(0)|答案(1)|浏览(112)

我试图使这个todolist应用程序使用react,axios和php作为API。读取功能工作完美。然而,当我试图发送数据到数据库,它总是给予''即使它工作正常,当我尝试没有react。
这是php代码

include 'config.php';

$content = mysqli_real_escape_string($kon, $_POST['content']);
$sql = mysqli_query($kon, "insert into note (content) values ('$content');");

这是表单React代码

const[list, setList] = useState('')
const handleSubmit = (e) =>{
      e.preventDefault();
      console.log(list)
      axios
      .post('http://localhost:8080/todolist/add.php', {
        content: list,
      })
      .then(res =>{
        console.log(list);
      })
    }

<Form onSubmit = {handleSubmit}>
          <Form.Group className="mb-3" style={{ width: '27rem' }}>
            <Form.Control type="text" onChange={ (e) => setList(e.target.value)} name="content" placeholder="What Do You Want to Do Today?"/>
          </Form.Group>
          <Button variant="primary" type="submit"> + </Button>
        </Form>

有什么我错过或代码错误?谢谢

2izufjch

2izufjch1#

不清楚它总是给予什么?但是当您使用e.preventDefault()时;它阻止默认行为“通过html表单提交数据”,因此您不会通过表单提交,在这种情况下,您可以使用onClick

<Form>
        <Form.Group className="mb-3" style={{ width: '27rem' }}>
          <Form.Control 
               type="text" 
               onChange={ (e) => setList(e.target.value)}
               name="content"
               value={list}
               placeholder="What Do You Want to Do Today?"
          />
        </Form.Group>
     <Button variant="primary" onClick ={handleSubmit}> + </Button>
 </Form>

相关问题