Почему моя функция стрелки не возвращает тег p?

Question

Привет, я новичок в изучении фреймворка реагирования и работаю над простым приложением. Теперь у меня есть две функции стрелок 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

То, что вы возвращаете из обработчика событий, не будет обработано, т.е.

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

Вместо этого вы можете использовать состояние в Assets компоненте и обновлять состояние компонента значением поля ввода и условно отображать их.

Вы можете сделать это двумя способами. Использование controlled компонента или uncontrolled компонента.

Контролируемый компонент : В контролируемом компоненте данные формы обрабатываются компонентом React.

Неконтролируемый компонент : В неуправляемом компоненте данные формы обрабатываются самим 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>
    );
  }
}

Answer 2

Вы делаете 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>)
}