Question

您好，我是学习React Framework和开发一个简单应用程序的新手，我现在有两个箭头函数FormSubmitAsset和FormSubmitCash，我希望当通过p标签提交表单时，它们两个都返回输入值，但是不能正常工作在这方面帮助我

import React from 'react';
import ReactDOM from 'react-dom';

console.log("Financial Accounting is running");
class FinancialAccount extends React.Component{


render(){
const title = 'Financial App';
return(
( 
 <div>
<Header title={title}/>
<Assets 
 FormSubmitAsset =  {this.FormSubmitAsset} 
 FormSubmitCash = {this.FormSubmitCash}
  /></div> ))}

  }

   class Assets extends React.Component{
   FormSubmitAsset =(e)=>{
    e.preventDefault();   
      const option = e.target.elements.input.value.trim(); 
   console.log(option)
      }

     FormSubmitCash =(e)=>{
    e.preventDefault();
      const option = e.target.elements.inputCash.value.trim();

    console.log(option)

       } 

  render(){
 return(<div>
    <form onSubmit={this.FormSubmitAsset}>
    <input type ='text' name = 'input'></input>
    <button>Add Asset</button>
    </form>
    <form onSubmit={this.FormSubmitCash} >
    <input type ='number' name ='inputCash'></input>
    <button>Add Cash</button>
    </form>
    </div>)
   }}

  const Header =(props)=>{
 return(<h1>{props.title}</h1>
 )}



    export default FinancialAccount;

我希望FormSubmitAsset和FormSubmitCash返回段落中的值

它试图做

      FormSubmitAsset =(e)=>{
     e.preventDefault();   
   const option = e.target.elements.input.value.trim(); 
   return (
        <div>
       <p>{option}</p>
       </div>   )
     }

但不返回任何内容

我正在做支票

      console.log(option)

但这不是理想的方法

Answer 1

您正在做const option = e.target.elements.input.value.trim();，实际上返回的是绑定了该元素的元素，而不是您想要的实际输入。

实际上你可以做这样的事情

render(){ return(
<div>
  <form onSubmit={this.FormSubmitAsset}>
    <input type='text' name='input'></input>
    <button type="submit">Add Asset</button>
  </form>
  <form onSubmit={this.FormSubmitCash}>
    <input type='number' name='inputCash'></input>
    <button type="submit">Add Cash</button>
  </form>
</div>) }} const Header =(props)=>{ return(
<h1>{props.title}</h1>
)} `

FormSubmitAsset =(e)=>{
     e.preventDefault();   
   const option = document.getElementById("input"); 
   return (
        <div>
       <p>{option.value}</p>
       </div>)
}

Answer 2

从事件处理程序返回的内容将不会呈现，即

// will not be rendered
return (
        <div>
          <p>{option}</p>
        </div>  
     )

相反，您可以在Assets组件中使用状态，并使用输入字段值更新组件状态并有条件地呈现它们。

您可以通过两种方式进行操作。使用controlled组件或uncontrolled组件。

Controlled Component：在受控组件中，表单数据由React组件处理。

Uncontrolled Component：在不受控制的组件中，表单数据由DOM本身处理。

不受控制的组件

class Assets extends React.Component {    
  // creating property in state 
  //  for each input field
  state = {
    asset: "",
    inputCash: ""
  };

  FormSubmitAsset = e => {
    e.preventDefault();
    const option = e.target.elements.input.value.trim();
    // updating state with input field value
    this.setState({ asset: option });
  };

  FormSubmitCash = e => {
    e.preventDefault();
    const option = e.target.elements.inputCash.value.trim();
     // updating state with input field value
    this.setState({ inputCash: option });
  };

  render() {
    const { asset, inputCash } = this.state;
    return (
      <div>
        <form onSubmit={this.FormSubmitAsset}>
          <input type="text" name="input" />
          <button>Add Asset</button>
        </form>
        <form onSubmit={this.FormSubmitCash}>
          <input type="number" name="inputCash"/>
          <button>Add Cash</button>
        </form>
        // if "assest" is not empty 
        // render "assest" 
        {asset && <p> {asset} </p>}
        // "inputCash" is not empty
        // render "inputCash"
        {inputCash && <p> {inputCash} </p>}
      </div>
    );
  }
}

受控组件

class Assets extends React.Component {

  // add state 
  state = {
    asset: "",
    inputCash: "",
    finalAsset: "",
    finalInputCash: ""
  };

  formSubmitAsset = e => {
    e.preventDefault();
    this.setState({ finalAsset: this.state.asset });
  };

  formSubmitCash = (e) => {
    e.preventDefault();
    this.setState({ finalInputCash: this.state.inputCash });
  };

  changeHandler = (e) => {
    this.setState({
      [e.target.name]: e.target.value
    })
  }

  render() {
    return (
      <div>
        <form>
          // binding input field value with state property "asset"
          // update state value with event handler "changeHandler"
          <input type="text" name="asset" value={this.state.asset} onChange={this.changeHandler}/>
          <button onClick={this.formSubmitAsset}>Add Asset</button>
          <br />
          // binding input field value with state property "inputCash"
          // update state value with event handler "changeHandler"
          <input type="number" name="inputCash" value={this.state.inputCash} onChange={this.changeHandler}/>
          <button onClick={this.formSubmitCash}>Add Cash</button>
        </form>
        // if "finalAsset" is not empty 
        // render "finalAsset"
        {this.state.finalAsset && <p> {this.state.finalAsset} </p>}
        // if "finalInputCash" is not empty
        // render "finalInputCash"
        {this.state.finalInputCash && <p> {this.state.finalInputCash} </p>}
      </div>
    );
  }
}

此外，您无需将道具传递到Assets组件。

class FinancialAccount extends React.Component {
  render() {
    const title = "Financial App";
    return (
      <div>
        <Header title={title} />
        // No need to pass props 
        <Assets />
      </div>
    );
  }
}

为什么我的箭头功能没有返回p标签？

2 个答案: