Question

每次尝试使用reactjs选择特定电子邮件时，都会尝试提醒电子邮件记录。为此，我创建了Reactjs函数。

问题是它显示错误：

无法读取fetchEmail中未定义的属性电子邮件

每次尝试选择特定的电子邮件。

<!DOCTYPE html>
<head>
    <meta charset="UTF-8" />

</head>
<div id="app"></div>
<script type="text/babel">
var MainBox  = React.createClass({
    render:function(){
        return(
            <App/>
        );
    }
});


class App extends React.Component {
  constructor(){
    super() 
      this.state = {
 //isLoading: true,
        //data: []
      }

  }
  componentDidMount() {

  }

fetchEmail(){
//this.email = '';
alert(this.email);

}


  render() {


    return (
<div id='container'>

<select name="this.email" id="this.email" value={this.email} onChange={this.fetchEmail} >

  <option value=''>Select Email</option>
                           <option value='tony@gmail.com'>Tony Email</option>
                           <option value='mich@gmail.com'>Michael Email</option>
                           <option value='frank@gmail.com'>Frank Email</option>
 </select>

  </div>

    )
  }
}


ReactDOM.render(
    <MainBox />,
    document.querySelector("#app")
);
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
</body>
</html>

Answer 1

您可以从通过<select>传递给onChange()的事件对象的fetchEmail()中检索更改的电子邮件字符串值。向fetchEmail()添加参数以捕获该已传递的事件。您可以通过定位该事件对象的<select>来获取target.value的值。在React Forms的官方文档中对此进行了很好的解释和演示：

fetchEmail(e) {
  console.log(e.target.value);
}

目前尚不清楚您要执行的操作，但似乎您正在尝试在组件上存储email的值，在<select>发生更改事件时对其进行更新并使用该价值以某种方式。在React中，您可以通过state完成此操作。您将需要进行一些更改。这包括向您的email添加state属性。更新value上的<select>属性以使用this.state.email代替this.email。另外，您将使用setState()更新组件的本地状态值。在这种情况下，更新email以匹配e.target.value。最后，您可以使用email而不是this.state.email来访问此this.email值。

这是修改后的组件的外观：

class App extends Component {
  constructor() {
    super();
    this.state = {
      isLoading: false,
      email: ''
    };

    this.fetchEmail = this.fetchEmail.bind(this);
  }

  fetchEmail(e) {
    console.log(e.target.value);
    this.setState({ email: e.target.value });
    // do no attempt to do console.log(this.state.email) right here, it will not be updated right away, see https://stackoverflow.com/questions/41278385/setstate-doesnt-update-the-state-immediately
  }

  render() {
    return (
      <div>
        <p>{this.state.email}</p>
        <select name="email" id="email" value={this.state.email} onChange={this.fetchEmail} >
          <option value=''>Select Email</option>
          <option value='tony@gmail.com'>Tony Email</option>
          <option value='mich@gmail.com'>Michael Email</option>
          <option value='frank@gmail.com'>Frank Email</option>
        </select>
      </div>
    );
  }
}

这里是example的动作。

希望有帮助！

Answer 2

尝试这样做：

this.fetchEmail = this.fetchEmail.bind(this);

在构造函数中。

如果您不使用内部状态直接尝试警告邮件，则可以遵循以下代码。

    class App extends React.Component {
    constructor() {
        super();
        this.state = {
            email: ''
        };
        this.fetchEmail = this.fetchEmail.bind(this);
    }
    render() {
        return (
            <div>
                <select name="this.email" id="this.email" value={this.state.email} onChange={this.fetchEmail} >

                    <option value=''>Select Email</option>
                    <option value='tony@gmail.com'>Tony Email</option>
                    <option value='mich@gmail.com'>Michael Email</option>
                    <option value='frank@gmail.com'>Frank Email</option>
                </select>
            </div>
        );
    }
    fetchEmail(e) {
        this.setState({email: e.currentTarget.value});
        alert(e.currentTarget.value);
    }
}

如何使用Reactjs提醒选定的记录

2 个答案: