Reactjs를 사용하여 입력 필드를 지우시겠습니까?

Reactjs를 사용하여 입력 필드를 지우시겠습니까?

아래 변수를 사용하고 있습니다.

var newInput = {
   title: this.inputTitle.value,
   entry: this.inputEntry.value    
};

이것은 입력 필드에서 사용됩니다.

<input type="text" id="inputname" className="form-control" ref={el => this.inputTitle = el} />   
<textarea id="inputage" ref={el => this.inputEntry = el} className="form-control" />
<button className="btn btn-info" onClick={this.sendthru}>Add</button>

활성화되면{this.sendthru}입력 필드를 지우고 싶습니다.하지만 어떻게 해야 할지 모르겠어요.

또, 이 예에 나타나듯이, 제가 지적받은 것은,ref입력값 속성.내가 잘 모르는 것은, 이 모든 것을 가지고 있다는 것이 정확히 무엇을 의미하는가 하는 것이다.{el => this.inputEntry = el}의 의의는 무엇입니까?el이 상황에서?

'send'의 'this' 바인딩을 완료했다고 가정해 보겠습니다.Thru' 함수.

다음 함수는 메서드가 트리거되면 입력 필드를 지웁니다.

sendThru() {
    this.inputTitle.value = "";
    this.inputEntry.value = "";
}

참조는 인라인 함수식으로 쓸 수 있습니다.

ref={el => this.inputTitle = el}

어디에el컴포넌트를 나타냅니다.

ref가 위와 같이 작성되면 React는 매번 다른 함수 개체를 인식하므로 업데이트 때마다 ref가 컴포넌트 인스턴스와 함께 호출되기 직전에 null로 호출됩니다.

자세한 내용은 여기를 참조하십시오.

입력 태그의 값 속성 선언(예:value= {this.state.name}이 입력값을 클리어 하려면 , 를 사용할 필요가 있습니다.this.setState({name : ''})

참고로 PFB 작업 코드:

<script type="text/babel">
    var StateComponent = React.createClass({
        resetName : function(event){
            this.setState({
                name : ''
            });
        },
        render : function(){
            return (
                <div>
                    <input type="text" value= {this.state.name}/>
                    <button onClick={this.resetName}>Reset</button>
                </div>
            )
        }
    });
    ReactDOM.render(<StateComponent/>, document.getElementById('app'));
</script>

{el = > this.inputEntry = el} 구문은 잘 모르겠습니다만, 입력 필드를 클리어 할 때는, 전술한 대로 참조를 할당합니다.

<input type="text" ref="someName" />

입력값 사용을 마친 후 onClick 함수에서 다음을 사용하십시오.

this.refs.someName.value = '';

편집

실제로 {el = > this.inputEntry = el}은 이와 동일하다고 생각합니다.누군가 날 고쳐줄지도 몰라el 값이 참조가 되려면 어딘가에서 전달되어야 합니다.

function (el) {
    this.inputEntry = el;
}

리액트 훅을 사용하여 @Satheesh와 유사한 솔루션을 제공하고 있습니다.

상태 초기화:

const [enteredText, setEnteredText] = useState(''); 

입력 태그:

<input type="text" value={enteredText}  (event handler, classNames, etc.) />

이벤트 핸들러 기능 내에서 입력 폼의 데이터로 개체를 업데이트한 후 다음을 호출합니다.

setEnteredText('');

참고: 이를 '양방향 바인딩'이라고 합니다.

입력 타입 ="put"을 사용할 수 있습니다.

<form action="/action_page.php">
  text: <input type="text" name="email" /><br />  
  <input type="reset" defaultValue="Reset" />  
</form>

이제 를 사용할 수 있습니다.useRef만약 당신이 사용하고 싶지 않다면 어떤 마법을 얻기 위해 후크.useState후크:

function MyComponent() {
  const inputRef = useRef(null);
  const onButtonClick = () => {
    // @ts-ignore (us this comment if typescript raises an error)
    inputRef.current.value = "";
  };
  return (
    <>
      <input ref={inputRef} type="text" />
      <button onClick={onButtonClick}>Clear input</button>
    </>
  );
}

아까 말씀드렸듯이useState그게 가장 좋은 방법이야이 특별한 접근법도 보여드리고 싶었습니다.

또한 React v 16.8+ 이후에는 후크를 사용할 수 있습니다.

import React, {useState} from 'react';

const ControlledInputs = () => {
  const [firstName, setFirstName] = useState(false);

  const handleSubmit = (e) => {
    e.preventDefault();
    if (firstName) {
      console.log('firstName :>> ', firstName);
    }
  };

  return (
    <>
      <form onSubmit={handleSubmit}>
          <label htmlFor="firstName">Name: </label>
          <input
            type="text"
            id="firstName"
            name="firstName"
            value={firstName}
            onChange={(e) => setFirstName(e.target.value)}
          />
        <button type="submit">add person</button>
      </form>
    </>
  );
};

useState를 사용할 수 있습니다.

import React, { useState } from 'react';
const [inputTitle, setInputTitle] = useState('');

입력 컴포넌트에 가치를 더합니다.

render() {
<input type="text" onChange={(e) => setInputTitle(e.target.value)} 
value={inputTitle} />
<button onClick={handleSubmit} type="submit">Submit</button>
}

송신 핸들러 기능:

setInputTitle('');
 document.querySelector('input').defaultValue = '';

 

onClick 이벤트 시

this.state={
  title:''
}

sendthru=()=>{
  document.getElementByid('inputname').value = '';
  this.setState({
     title:''
})
}

<input type="text" id="inputname" className="form-control" ref={el => this.inputTitle = el} />   
<button className="btn btn-info" onClick={this.sendthru}>Add</button>

이를 위해 defaultValue 속성, useRef 및 onClick을 사용했습니다.

let ref = useRef()

그리고 반환점 내부:

<input type="text" defaultValue="bacon" ref={ref} onClick={() => ref.current.value = ""} />

또한 입력에 onChange를 사용하려는 경우 추가 구성이 필요하지 않으며 그냥 사용할 수 있습니다.dynamic defaultValue를 사용하는 경우 useState를 사용하여 확실하게 설정할 수 있습니다.

React에서 입력을 리셋하는 간단한 방법은 입력 내부에 onBlur를 구현하는 것입니다.

onBlur={cleanSearch}

ej:

const [search, setSearch] = useState('')

const handleSearch = ({target}) =>{
    setSearch(target.value)
}



const cleanSearch = () =>setSearch('')


 <input
       placeholder="Search…"
       inputProps={{ 'aria-label': 'search' }}
       value={search}
       onChange={handleSearch}
       onBlur={cleanSearch}
   />



 

양식 입력 값을 지우는 방법은 양식 태그에 ID를 추가하는 것입니다.다음으로 Submit을 처리할 때 이것을 호출합니다.clearForm()

clearForm 함수에서는 document.getElementById("myForm").reset()을 사용합니다.

import React, {Component } from 'react';
import './App.css';
import Button from './components/Button';
import Input from './components/Input';

class App extends Component {  
  state = {
    item: "", 
    list: []
}

componentDidMount() {
    this.clearForm();
  }

handleFormSubmit = event => {
   this.clearForm()
   event.preventDefault()
   const item = this.state.item

    this.setState ({
        list: [...this.state.list, item],
            })

}

handleInputChange = event => {
  this.setState ({
    item: event.target.value 
  })
}

clearForm = () => {
  document.getElementById("myForm").reset(); 
  this.setState({
    item: ""
  })
}



  render() {
    return (
      <form id="myForm">
      <Input

           name="textinfo"
           onChange={this.handleInputChange}
           value={this.state.item}
      />
      <Button
        onClick={this.handleFormSubmit}
      >  </Button>
      </form>
    );
  }
}

export default App;

언급URL : https://stackoverflow.com/questions/38731271/clear-an-input-field-with-reactjs