Как определить, подать с входа и использовать переменную в React?

Question

Я хочу определить переменную, установить ее значение из входных данных, а затем вызвать указанную переменную в функции при каждом цикле рендеринга. Как это сделать?

export default ({priceAtInvestment, currentPrice}) => {
    <main>
        <h1>
            <span>If you had invested $</span>
            <input name="investmentAmount" type="number" value={investmentAmount}></input>
            <span>in</span>
            <select name="stockName">
                <option value="NFLX">Netflix</option>
                <option value="AMZN">Amazon</option>
            </select>
            <span>on</span>
            <input name="investmentDate" type="date" value="1995-06-13" ></input>
        </h1>
        {calculateStockValue(priceAtInvestment, currentPrice, investmentAmount)}
    </main>
}

Answer 1

С последней версией реакции, т. Е. 16.8.0 или выше, в приложении Gatsby, вы можете использовать useState в функциональном компоненте для сохранения состояния для входного значения

export default ({priceAtInvestment, currentPrice}) => {
  const [investmentAmount, setInvestmentAmount] = useState(0);
  return (
    <main>
        <h1>
            <span>If you had invested $</span>
                <input name="investmentAmount" type="number" value={investmentAmount} onClick={(e) => setInvestmentAmount(e.target.value)}></input>
            <span>in</span>
                <select name="stockName">
                    <option value="NFLX">Netflix</option>
                    <option value="AMZN">Amazon</option>
                </select>
            <span>on</span>
                <input name="investmentDate" type="date" value="1995-06-13" ></input>
        </h1>
        {calculateStockValue(priceAtInvestment, currentPrice, investmentAmount)}
    </main>
  )
}

иначе вам нужно использовать конвертирование вашего приложения в компонент класса

export default class Investment extends React.Component {
   state = {
      investmentAmount: 0
   }
   setInvestmentAmount = (e) => {
      this.setState({investmentAmount: e.target.value})
   }
   render() {
      const {priceAtInvestment, currentPrice} = this.props;
      const {investmentAmount} = this.state;
      return (
        <main>
            <h1>
                <span>If you had invested $</span>
                    <input name="investmentAmount" type="number" value={investmentAmount} onClick={this.setInvestmentAmount}></input>
                <span>in</span>
                    <select name="stockName">
                        <option value="NFLX">Netflix</option>
                        <option value="AMZN">Amazon</option>
                    </select>
                <span>on</span>
                    <input name="investmentDate" type="date" value="1995-06-13" ></input>
            </h1>
            {calculateStockValue(priceAtInvestment, currentPrice, investmentAmount)}
        </main>
      )
    }
}