Question

我有两个输入框，用于将用户输入作为数字，并希望在跨度中显示其添加结果，但是没有添加它们，所以将它们添加到后面。

          This is my reactjs that i have tried:

              class EssayForm extends React.Component {
                 constructor(props) {
               super(props);
                          this.state = {
                value:'',
                 fno:'',
               sno:'',
         };
            this.handleSquareChange = this.handleSquareChange.bind(this);

           this.handleTextChange = this.handleTextChange.bind(this);

         this.handleTextLastChange = this.handleTextLastChange.bind(this);

              this.handleSubmit = this.handleSubmit.bind(this);
              }

                handleSquareChange(event) {
                this.setState({value: event.target.value});
                  }

               handleTextChange(event) {
                this.setState({fno: event.target.value});
               }

            handleTextLastChange(event) {
            this.setState({sno: event.target.value});
                }

           handleSubmit(event) {
           event.preventDefault();
               alert("welcome");
           }

                      render() { 
              return (
               <div className="example">
                   <form onSubmit={this.handleSubmit}>
                   <span>Square of:</span>
                   <input type="text" value={this.state.value} onChange= 
             {this.handleSquareChange} />
                <span>First no:</span>
              <input type="text" value={this.state.fno} onChange= 
       {this.handleTextChange} />
         <span>second no:</span>
          <input type="text" value={this.state.sno} onChange= 
          {this.handleTextLastChange} />
      <input type="submit" value="Submit" onClick={this.handleSubmit} />
               </form>
            <div className="preview">
                <h1>Square of no is</h1>
              <div>{this.state.value * this.state.value}</div>
                </div>

             <div className="preview">
           <h1>Result of no is</h1>
            <div>{this.state.fno + this.state.sno}</div>
                      </div>
                </div>
              );
            }
       } 

           ReactDOM.render(<EssayForm />, document.getElementById('app'));

我已经用一个输入框对一个数字进行平方运算了，但是不能加法。任何人都可以让我知道我错了.reactjs是我的新手。

Answer 1

在您的状态下，您已将sno和fno定义为字符串。因此，当您对它们进行任何设置时，它们会将值设为字符串。您可以做的是通过将sno和fno设置为默认值0来使它们编号为数字。或者，您可以在添加之前将其强制转换为数字。就像（Number）this.state.fno +（Number）this.state.sno。

Answer 2

handleTextChange(event) {
      this.setState({fno: Number(event.target.value)});
}

handleTextLastChange(event) {
      this.setState({sno: Number(event.target.value)});
}

只需替换功能。希望这可以解决您的问题

Answer 3

这是给您的代码；

class EssayForm extends React.Component {
  constructor(props) {
    super(props);
      this.state = {
        value:'',
        fno:'',
        sno:'',
      };

      this.handleChange = this.handleChange(this);
      this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    const { name, value } = event.target;

    this.setState({ [name]: value });
  }

  handleSubmit(event) {
    event.preventDefault();
    alert("welcome");
  }

  render() { 
    const { fno, sno, value } = this.state;

    return (
      <div className="example">
        <form onSubmit={this.handleSubmit}>
          <span>Square of:</span>
          <input 
            type="text" 
            name="value"
            value={value} 
            onChange={this.handleChange} 
          />
          <span>First no:</span>
          <input 
            name="fno"
            type="text"
            value={fno}
            onChange={this.handleChange} 
          />
          <span>second no:</span>
          <input 
            type="text" 
            name="sno"
            value={sno} 
            onChange={this.handleChange}
          />
          <input type="submit" value="Submit" onClick={this.handleSubmit} />
        </form>
        <div className="preview">
          <h1>Square of no is</h1>
          <div>{Number(value) * Number(value)}</div>
        </div>
        <div className="preview">
          <h1>Result of no is</h1>
          <div>{Number(fno) + Number(sno)}</div>
        </div>
      </div>
    );
  }
} 

ReactDOM.render(<EssayForm />, document.getElementById('app'));

reactjs中两个数字的加法

3 个答案: