React js:状态更改触发按钮点击

Question

input_value和quote_value状态在输入onCgange事件时发生变化。这种状态变化以某种方式触发ADD QUOTE按钮上的send_data功能。我正在努力寻找背后的原因。

import classes from '../css/AddQuote.module.css';
import { useState } from 'react';
import db from './db.js';
const AddQuotes = () => {
const [input_value, setValue] = useState(''); //state1
const [quote_value, set_quote_value] = useState(''); //state2
let data = {
Author: input_value,
Quote: quote_value,
};
function changeInptVl(val) {
setValue(val.target.value);
}
function change_qt_val(val) {
set_quote_value(val.target.value);
}
function send_data(data) {
db.collection('data').add(data);
then(() => {
console.log('data send');
}).catch(() => {
console.log('eror occured');
});
}
return (
<div className={classes.input_container}>
Author
<input className={classes.author} onChange={changeInptVl}></input>
Quote
<textarea
onChange={change_qt_val}
style={{ width: '100%', height: '130px', outline: 'none' }}
>
{' '}
</textarea>
//ADD QUOTE BUTTON{' '}
<button
onClick={send_data(data)}
style={{
marginTop: '10px',
borderRadius: '5px',
background: '#0aa0f2  ',
width: '120px',
height: '70px',
color: 'white',
borderStyle: 'none',
}}
>
ADD QUOTE
</button>
</div>
);
};
export default AddQuotes;

Answer 1

当您将值传递给send data函数时，您需要使用ES6函数，如下所示：<button onClick={ () => send_data(data) } etc...或者该函数将在页面首次加载时以及每次状态更改时自动执行，这只是因为语法的原因。