Question

我是React和REDUX的新手，我只是开发了一个简单的反应应用程序，现在我遇到了一个问题，当我在我的组件中渲染一个输入元素时，如果我设置元素＆＃34;值＆＃34;它变为只读但如果我在＆＃34; defaultValue＆＃34;上设置了值。当我重新更新我的状态时，它永远不会再次更新。

这是我的代码：

    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)}，它正常工作（它更新道具或状态更新时，我可以重新键入值），但我认为这不是一个正确的解决方案，因为它会导致我的错误浏览器控制台这是因为＆＃34; this.onChange＆＃34;功能不存在。

请帮助我解决这个问题，并提前感谢

此致

Vidy

Answer 1

您的输入无效的原因是您需要define具有更新值的onChange sets the state函数。您可以内联，因为它只需要像

这样的语句

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

但是我会建议您使用onChange方法，因为您可以使用它来处理多个输入并且看起来更干净

＆＃13;

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'));

＆＃13;

<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>

＆＃13;

Answer 2

如果您使用的是redux，那么您需要定义onChange方法，该redux可能是通过reducer更新组件状态的操作。使用简单状态和es6的更简单方法如下所示。此外，您将通过Facebook阻止来自输入字段的值ref。这也应该给你一个错误，因为你试图控制和不受控制的组件。

Here's a link到表单文档以供进一步阅读。

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>
    );
  }
}

Answer 3

我正在修补这个问题并找到了一个非常简单的解决方案：

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>
    )
}
}

因此，在初始render（）时，字段的状态是构造函数中硬编码的内容。当用户单击name或pswd框（这些可以很容易地分开）时，都会使用clearText（）清除它们，然后使用allowText（）将它们都设置为null。设置为null后，将接受用户输入文本。

确保LoginFields组件在输入中包含此内容：

onFocus={this.props.onFocus}

反应输入元素：值与默认值

3 个答案: