반응 입력 요소: 값과 기본값

반응 입력 요소: 값과 기본값

구성요소 내에서 입력 요소를 렌더링할 때 요소 "값"을 설정하면 읽기 전용이 되지만 "기본값"으로 값을 설정하면 상태를 다시 업데이트할 때 다시 업데이트되지 않습니다.

제 코드는 다음과 같습니다.

    import React from "react";
    export default class EditForm extends React.Component {

    editTransaction(event) {

        var transaction = this.props.transaction;

        event.preventDefault();
        var NewTransaction = {
            transactions_data: {
                amount: this.refs.amount.value
            }
        }

        this.props.editTransaction(NewTransaction, transaction.id);
    }

    closeForm() {
        this.props.closeForm();
    }

    render() {
        var {amount}=this.props.transaction;
        return (
            <div>
                <br/>
                <h4>Edit Transaction</h4>
                <div className="btn btn-danger pull-right" onClick={this.closeForm.bind(this)}>close</div>
                <div className="clearfix"></div>
                <form onSubmit={this.editTransaction.bind(this)}>
                    <div>
                        <label for="amount">Amount</label>
                        <input value={amount} onChange={(value) => this.onChange(value)} className="form-control"
                               id="amount" name="amount" type="number"
                               ref="amount"/>
                    </div>
                    <br/>
                    <br/>
                    <input className="btn btn-info" type="submit" value="submit"/>
                </form>
            </div>
        );
    }
}

그리고 제가 실수를 했는지 알아냈어요.onChange={(value) => this.onChange(value)}입력 요소에서는 정상적으로 동작합니다(소품이나 상태가 업데이트되고 값을 다시 입력할 수 있습니다). 하지만 브라우저 콘솔에 오류가 발생하기 때문에 적절한 해결책은 아니라고 생각합니다."this.onChange" 함수가 존재하지 않기 때문입니다.

이 문제는 어떻게 해결할 수 있을까요?

입력이 작동하지 않는 이유는define그onChange실제로 존재하는 기능sets the state갱신된 값으로 설정합니다.다음과 같은 설명만 있으면 되기 때문에 아마 인라인으로 할 수 있을 것입니다.

<input type="text" value={this.state.inputVal} onChange={(e) => {this.setState({inputVal: e.target.value})}} />

단, 이 기능을 사용하는 것이 좋습니다.onChange여러 입력을 동시에 처리할 수 있고 깔끔해 보이는 방법

class EditForm extends React.Component {

    constructor() {
        super();
        this.state = {
        
        }
    }
    onChange(e) {
         this.setState({[e.target.name]: e.target.value})
    }
    editTransaction(event) {

        var transaction = this.props.transaction;

        event.preventDefault();
        var NewTransaction = {
            transactions_data: {
                amount: this.refs.amount.value
            }
        }

        this.props.editTransaction(NewTransaction, transaction.id);
    }

    closeForm() {
        this.props.closeForm();
    }

    render() {
       
        return (
            <div>
                <br/>
                <h4>Edit Transaction</h4>
                <div className="btn btn-danger pull-right" onClick={this.closeForm.bind(this)}>close</div>
                <div className="clearfix"></div>
                <form onSubmit={this.editTransaction.bind(this)}>
                    <div>
                        <label for="amount">Amount</label>
                        <input value={this.state.amount} onChange={(value) => this.onChange(value)} className="form-control"
                               id="amount" name="amount" type="number"
                               ref="amount"/>
                         <input value={this.state.amount1} onChange={(value) => this.onChange(value)} className="form-control"
                               id="amount1" name="amount1" type="number"
                               ref="amount"/>
                    </div>
                    <br/>
                    <br/>
                    <input className="btn btn-info" type="submit" value="submit"/>
                </form>
            </div>
        );
    }
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react-dom.min.js"></script>
<div id="app"></div>

redex를 사용하는 경우 reducer를 통해 컴포넌트 상태를 업데이트하는 작업이 될 수 있는 onChange 메서드를 정의해야 합니다.es6에서 간단한 상태를 사용하는 보다 쉬운 방법은 다음과 같습니다.게다가 입력 필드의 값은, 다음의 방법으로 얻을 수 있습니다.refFacebook에 의해 좌절되고 있습니다.이 경우 컴포넌트를 제어하려고 하기 때문에 에러가 발생합니다.

자세한 내용을 참조할 수 있도록 폼 설명서에 대한 링크입니다.

class Foo extends React.Component { 
  constructor(props) {
    super(props);
    this.state = ({
      inputVal: '',
    });
  }
  onChange = (e) => {
    this.setState({ [e.target.name]: e.target.value });
  }
  handleSubmit = (event) => {
    event.preventDefault();
    console.log(this.state.inputVal);
  }
  render() {
    return (
      <div>
        <input type="text" value={this.state.inputVal} onChange={this.onChange} />
      </div>
    );
  }
}

이걸 만지작거리다가 정말 간단한 해결책을 찾았어요.

class App extends Component {

constructor(props) {
    super(props)
    this.enterText = this.enterText.bind(this)
    this.state = {
        userNameText: 'user name',
        pswdText: 'pswd',
        textEntry: false
    }
}

async enterText() {
    if (!this.state.textEntry) {
        await this.clearText()
        this.setState({textEntry: true})
    }
}

clearText() {
    this.setState({
        userNameText: '',
        pswdText: ''
    })
}

render() {
    return (
        <div className="App">
            <div className="App-header">
                <h1 className="App-title">
                    Welcome
                </h1>
            </div>
            <div className="login-fields">
                <LoginFields userNameText={this.state.userNameText} pswdText={this.state.pswdText} onFocus={this.enterText} />
            </div>
        </div>
    )
}
}

따라서 첫 번째 렌더링() 시 필드 상태는 생성자에 하드 코딩된 것입니다.사용자가 이름 또는 pswd 상자 중 하나를 클릭하면(이러한 상자를 쉽게 분리할 수 있음), 둘 다 clearText()로 클리어되고 둘 다 allowText()로 null로 설정됩니다.null로 설정하면 사용자 입력 텍스트가 허용됩니다.

LoginFields 컴포넌트의 입력에 다음이 포함되어 있는지 확인합니다.

onFocus={this.props.onFocus}

React에서 입력에 값을 설정하면 값은 변경되지 않습니다(onChange 핸들러를 지정하지 않는 한).

<input type="text" name="address" value="Europe" />

이 요소의 최종 결과는 변경할 수 없는 Europe 값을 가진 텍스트 상자이므로 사실상 읽기 전용 텍스트 상자입니다.

대신 입력 필드에 기본값을 지정하는 경우 다음과 같이 defaultValue 속성을 사용해야 합니다.

<input type="text" name="address" defaultValue="Europe" />

따라서 값 속성을 defaultValue로 바꿉니다.

언급URL : https://stackoverflow.com/questions/42807901/react-input-element-value-vs-default-value