Question

我对React还是很陌生...因此，我无法将用户在文本区域中输入的字符串复制到新组件中：如果不创建另一个<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example.juhi_gupta.pizza_corner"> <uses-permission android:name="android.permission.INTERNET"/> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/> <uses-permission android:name="android.permission.SEND_SMS"/> <application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:supportsRtl="true" android:theme="@style/AppTheme" >  <activity android:name="com.example.juhi_gupta.pizza_corner.SplashScreen" android:label="@string/app_name" android:screenOrientation="portrait" android:theme="@android:style/Theme.Black.NoTitleBar" > <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity>组件，则可以保留该值，但是当我创建一个新的Card组件（应该为空）时，也会在其中捕获该值。我尝试通过状态跟踪值和以前的内容，但是Card不会将新值更新为空字符串。

setState()

感谢您的帮助。

J。

Answer 1

您的设置状态没有被触发，因为您没有在文本区域正确使用onChange道具。您需要这样设置：

handleChange(ev){
   this.setState({value:ev.target.value,current:ev.target.value})
 }
...
<textarea type="text" onChange={e =>props.handleChange.bind(this)}></textarea>

触发事件时，.bind(this)中的handleChange告诉onChange运行该函数。如果您实际上像在onChange={e =>props.handleChange(e)}以上的代码中那样调用该函数，则该函数将立即评估一次，而不会再次评估。

考虑这一点的最佳方法是使用JS：

function foo(){
    return 5
}

var bar_now = foo() //the way you have set it up, but not what you want.
  >> 5

var bar_later = foo //the way you want it set up
  >> foo
bar_later() //when you evaluate bar_later() it calls foo()
  >> 5

Answer 2

我不确定我是否全部理解，但是如果您想通过任何更改将某些属性导入到Card组件中，则我100％确定需要为此导入的道具定义键值。

例如：

return <Card myKeyProps={myProps.id}/>

现在，一旦进入Card组件，就可以通过执行this.props.myKeyProps并在内部使用它来调用此值。现在您似乎有很多道具，仅凭反应来管理可能很疯狂。因此，我强烈建议您实施redux。

此外，react的最佳实践之一是将每个组件分成一个js文件。由于每个组件都有特定的功能，并且您分别了解每个文件的用途，因此它使阅读起来更加容易。

通过state.value ReactJS将textarea值复制到新组件

2 个答案: