Блог

Главная - Вопросы по программированию - Почему моя функция со стрелкой не возвращает тег p?

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

#javascript #reactjs #arrow-functions #react-props

#javascript #reactjs #функции со стрелкой #реагировать-реквизит

Вопрос:

Привет, я новичок в изучении 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)

но это не идеальный способ

Комментарии:

1. Он возвращает это. Он просто не возвращает его нигде полезным.

2. У вас проблема с XY . Чего вы пытаетесь достичь, возвращаясь из функции onsubmit?

3. я думаю, вы не поняли мою проблему, поэтому вы говорите, что значение в <p> {option}</p> не отображается на экране

4. @Saadi то, что вы возвращаете из своего обработчика событий, не будет отображаться. итак, вы могли бы использовать состояние в Assets компоненте

5. Здесь слишком много неправильного, чтобы предложить решение… вот документы о том, как правильно обрабатывать формы в React: reactjs.org/docs/forms.html

Ответ №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>)
}

Комментарии:

1. Я ценю ваши усилия, но теперь он выдает ошибку Uncaught TypeError: не удается прочитать свойство ‘value’ null

Ответ №2:

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

 // 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 amp;amp; <p> {asset} </p>}
        // "inputCash" is not empty
        // render "inputCash"
        {inputCash amp;amp; <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 amp;amp; <p> {this.state.finalAsset} </p>}
        // if "finalInputCash" is not empty
        // render "finalInputCash"
        {this.state.finalInputCash amp;amp; <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>
    );
  }
}