javascript - 如何使用 React 和 JSX 为按钮分配整数值？

Question

所以基本上我在练习 React 并试图让简单的组件与父组件通信。我遇到了一个问题，我不知道如何将按钮的值更改为整数，以便进行简单的计算。我曾尝试使用 parseInt 设置值，但也尝试不使用它，但我无法理解，按下“添加”按钮会给我一个 NaN。有人可以帮我吗？这就是我在 App.js 中的内容

import './App.css';
import Input from "./Components/Input"

class App extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      number: 10
    }
  }

  number1 = (event) => {
    this.setState({number: event.target.value})

  }

  number2 = (event) => {
    this.setState({number: event.target.value})
    if (this.state.number < 1){
      this.setState({number: 0})
    }

  }

  add = (event) => {
    this.setState({number: this.number+1})

  }

  render() {
    return (
      <div>
        <Input  number={this.state.number} 
                number1={this.number1} 
                number2={this.number2}
                add={this.add} />
      </div>
    );
  }
}

export default App;

这就是我在 Input.js 中所拥有的

let numberValue1= parseInt("8")
let numberValue2= parseInt("17")

const Input = ({number, number1, number2, add}) =>{
    return(
        <div>
            <h1>{number}</h1>
            <button value={numberValue1} onClick={number1}>Add</button>
            <button value={numberValue2} onClick={number2}>Subtract</button>
            <button  onClick={add}>Subtract</button>
        </div>
    );
}

export default Input;```

标签： javascriptreactjsjsx

Answer 1

您尝试做的事情从根本上来说有点奇怪-您可能不应该为按钮元素分配值，因为它们实际上没有意义（如果我要问您“这个按钮是什么价值？”你认为我的意思是什么？）。

相反，将函数传递给接受参数的按钮更有意义。

例如：

const ParentComponent = ()=> {
  const [number, setNumber] = useState(0);
  const add = (amount)=> {
    setNumber(number + amount);
  };

  return (
    <MyInput number={number} onAddButtonClicked={add} />
  )
}

const MyInput = ({number, onAddButtonClicked}) => {
  <div>
    <h1>{number}</h1>
    <button onClick={ ()=> onAddButtonClicked(1) }>Add</button>
    <button onClick={ ()=> onAddButtonClicked(-1) }>Subtract</button>
  </div>
}